:root{ /* Section colors are injected from PetsMunity Design System settings. */ --pm-on-strong:#FFFFFF; --pm-mix-dark:#000000; --pm-section-color:var(--pm-secondary); --pm-section-on:var(--pm-on-strong); --pm-section-ink:var(--pm-secondary); --pm-section-hover:color-mix(in srgb,var(--pm-section-color) 86%,var(--pm-mix-dark)); --pm-section-active:color-mix(in srgb,var(--pm-section-color) 76%,var(--pm-mix-dark)); --pm-section-soft:color-mix(in srgb,var(--pm-section-color) 10%,var(--pm-surface)); --pm-section-soft-2:color-mix(in srgb,var(--pm-section-color) 18%,var(--pm-surface)); --pm-section-border:color-mix(in srgb,var(--pm-section-color) 38%,var(--pm-surface)); --pm-section-ring:color-mix(in srgb,var(--pm-section-color) 28%,transparent); /* Every button/control state derives from the current section tokens. */ --pm-action-color:var(--pm-section-color); --pm-action-hover:var(--pm-section-hover); --pm-action-active:var(--pm-section-active); --pm-action-soft:var(--pm-section-soft); --pm-action-on:var(--pm-section-on); --pm-action-ink:var(--pm-section-ink); } body.pm-view-find-a-pet{ --pm-section-color:var(--pm-color-find-pet); --pm-section-on:var(--pm-on-strong); --pm-section-ink:var(--pm-color-find-pet); } body.pm-view-supplies{ --pm-section-color:var(--pm-color-supplies); --pm-section-on:var(--pm-on-strong); --pm-section-ink:var(--pm-color-supplies); } body.pm-view-services{ --pm-section-color:var(--pm-color-services); --pm-section-on:var(--pm-on-strong); --pm-section-ink:var(--pm-color-services); } body.pm-view-lost-found{ --pm-section-color:var(--pm-color-lost-found); --pm-section-on:var(--pm-primary); --pm-section-ink:var(--pm-primary); } body.pm-view-pedigree-database{ --pm-section-color:var(--pm-color-pedigree); --pm-section-on:var(--pm-primary); --pm-section-ink:var(--pm-primary); } body.pm-view-microchip-registry{ --pm-section-color:var(--pm-color-microchip); --pm-section-on:var(--pm-primary); --pm-section-ink:var(--pm-primary); } body.pm-view-community{ --pm-section-color:var(--pm-color-community); --pm-section-on:var(--pm-primary); --pm-section-ink:var(--pm-primary); } /* * Resolve section-derived states on the body, not :root. * This is important: each page sets --pm-section-color on , so hover, * active, focus, selected and soft states must be calculated on that same * element. Otherwise the inherited root fallback resolves to marketplace teal. */ body.petsmunity-app{ --pm-section-hover:color-mix(in srgb,var(--pm-section-color) 86%,var(--pm-mix-dark)); --pm-section-active:color-mix(in srgb,var(--pm-section-color) 76%,var(--pm-mix-dark)); --pm-section-soft:color-mix(in srgb,var(--pm-section-color) 10%,var(--pm-surface)); --pm-section-soft-2:color-mix(in srgb,var(--pm-section-color) 18%,var(--pm-surface)); --pm-section-border:color-mix(in srgb,var(--pm-section-color) 38%,var(--pm-surface)); --pm-section-ring:color-mix(in srgb,var(--pm-section-color) 28%,transparent); --pm-action-color:var(--pm-section-color); --pm-action-hover:var(--pm-section-hover); --pm-action-active:var(--pm-section-active); --pm-action-soft:var(--pm-section-soft); --pm-action-on:var(--pm-section-on); --pm-action-ink:var(--pm-section-ink); } /* Primary actions: normal, hover, pressed, selected, focus and disabled. */ body.petsmunity-app .pm-btn-primary{ background:var(--pm-section-color)!important; border-color:var(--pm-section-color)!important; color:var(--pm-section-on)!important; } body.petsmunity-app .pm-btn-primary:hover{ background:var(--pm-section-hover)!important; border-color:var(--pm-section-hover)!important; color:var(--pm-section-on)!important; } body.petsmunity-app .pm-btn-primary:active, body.petsmunity-app .pm-btn-primary.is-active, body.petsmunity-app .pm-btn-primary.is-selected, body.petsmunity-app .pm-btn-primary[aria-pressed="true"], body.petsmunity-app .pm-btn-primary[aria-selected="true"]{ background:var(--pm-section-active)!important; border-color:var(--pm-section-active)!important; color:var(--pm-section-on)!important; } body.petsmunity-app .pm-btn-primary:focus-visible{ outline:2px solid var(--pm-section-color)!important; outline-offset:2px; box-shadow:0 0 0 4px var(--pm-section-ring)!important; } body.petsmunity-app .pm-btn-primary:disabled, body.petsmunity-app .pm-btn-primary[disabled], body.petsmunity-app .pm-btn-primary[aria-disabled="true"]{ background:color-mix(in srgb,var(--pm-section-color) 42%,var(--pm-surface))!important; border-color:color-mix(in srgb,var(--pm-section-color) 42%,var(--pm-surface))!important; color:color-mix(in srgb,var(--pm-section-on) 65%,var(--pm-muted))!important; } /* Secondary / light / outline / ghost actions. */ body.petsmunity-app :is(.pm-btn-light,.pm-btn-secondary,.pm-btn-outline,.pm-btn-ghost){ color:var(--pm-section-ink)!important; border-color:var(--pm-section-border)!important; } body.petsmunity-app :is(.pm-btn-light,.pm-btn-secondary,.pm-btn-outline,.pm-btn-ghost):hover{ background:var(--pm-section-soft)!important; border-color:var(--pm-section-color)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app :is(.pm-btn-light,.pm-btn-secondary,.pm-btn-outline,.pm-btn-ghost):active, body.petsmunity-app :is(.pm-btn-light,.pm-btn-secondary,.pm-btn-outline,.pm-btn-ghost).is-active, body.petsmunity-app :is(.pm-btn-light,.pm-btn-secondary,.pm-btn-outline,.pm-btn-ghost).is-selected, body.petsmunity-app :is(.pm-btn-light,.pm-btn-secondary,.pm-btn-outline,.pm-btn-ghost)[aria-pressed="true"]{ background:var(--pm-section-soft-2)!important; border-color:var(--pm-section-color)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app :is(.pm-btn-light,.pm-btn-secondary,.pm-btn-outline,.pm-btn-ghost):focus-visible{ outline:2px solid var(--pm-section-color)!important; outline-offset:2px; box-shadow:0 0 0 4px var(--pm-section-ring)!important; } /* Links and small action text. */ body.petsmunity-app .pm-text-link{ color:var(--pm-section-ink)!important; text-decoration-color:var(--pm-section-color)!important; } body.petsmunity-app .pm-text-link:hover{ color:var(--pm-section-hover)!important; text-decoration-color:var(--pm-section-hover)!important; } body.petsmunity-app .pm-text-link:active, body.petsmunity-app .pm-text-link.is-active{ color:var(--pm-section-active)!important; } body.petsmunity-app .pm-text-link:focus-visible{ outline:2px solid var(--pm-section-color)!important; outline-offset:2px; border-radius:4px; } /* Kicker, category and general section icons. */ body.petsmunity-app .pm-kicker, body.petsmunity-app .pm-category-icon{ background:var(--pm-section-soft)!important; border-color:var(--pm-section-border)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app .pm-category-tile:hover{ border-color:var(--pm-section-color)!important; box-shadow:0 4px 14px var(--pm-section-ring)!important; } body.petsmunity-app .pm-category-tile:hover .pm-category-icon{ background:var(--pm-section-soft-2)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app .pm-category-tile:is(.is-active,.is-selected), body.petsmunity-app .pm-category-tile[aria-selected="true"], body.petsmunity-app .pm-category-tile[aria-pressed="true"]{ background:var(--pm-section-soft)!important; border-color:var(--pm-section-color)!important; box-shadow:0 0 0 2px var(--pm-section-ring)!important; } /* Chips, pills, filters and tags; semantic promotion/status chips stay untouched. */ body.petsmunity-app .pm-chip:not(.pm-chip-spotlight):not(.pm-chip-premier):not(.pm-chip-status), body.petsmunity-app :is(.pm-filter-chip,.pm-pill,.pm-tag){ background:var(--pm-section-soft)!important; border-color:var(--pm-section-border)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app .pm-chip:not(.pm-chip-spotlight):not(.pm-chip-premier):not(.pm-chip-status):hover, body.petsmunity-app :is(.pm-filter-chip,.pm-pill,.pm-tag):hover{ background:var(--pm-section-soft-2)!important; border-color:var(--pm-section-color)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app .pm-chip:not(.pm-chip-spotlight):not(.pm-chip-premier):not(.pm-chip-status):is(.is-active,.is-selected), body.petsmunity-app :is(.pm-filter-chip,.pm-pill,.pm-tag):is(.is-active,.is-selected), body.petsmunity-app :is(.pm-filter-chip,.pm-pill,.pm-tag)[aria-selected="true"], body.petsmunity-app :is(.pm-filter-chip,.pm-pill,.pm-tag)[aria-pressed="true"]{ background:var(--pm-section-color)!important; border-color:var(--pm-section-color)!important; color:var(--pm-section-on)!important; } /* Tabs, segmented controls, menus, options and pagination. */ body.petsmunity-app :is(.pm-tab,.pm-tabs button,.pm-segment,.pm-segmented button,.pm-option,.pm-menu-item,.pm-pagination a,.pm-pagination button,[role="tab"],[role="option"]){ --pm-control-color:var(--pm-section-color); } body.petsmunity-app :is(.pm-tab,.pm-tabs button,.pm-segment,.pm-segmented button,.pm-option,.pm-menu-item,.pm-pagination a,.pm-pagination button,[role="tab"],[role="option"]):hover{ background:var(--pm-section-soft)!important; border-color:var(--pm-section-border)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app :is(.pm-tab,.pm-tabs button,.pm-segment,.pm-segmented button,.pm-option,.pm-menu-item,.pm-pagination a,.pm-pagination button,[role="tab"],[role="option"]):is(.is-active,.is-selected), body.petsmunity-app :is(.pm-tab,.pm-tabs button,.pm-segment,.pm-segmented button,.pm-option,.pm-menu-item,.pm-pagination a,.pm-pagination button,[role="tab"],[role="option"])[aria-selected="true"], body.petsmunity-app :is(.pm-tab,.pm-tabs button,.pm-segment,.pm-segmented button,.pm-option,.pm-menu-item,.pm-pagination a,.pm-pagination button,[role="tab"],[role="option"])[aria-current="page"]{ background:var(--pm-section-color)!important; border-color:var(--pm-section-color)!important; color:var(--pm-section-on)!important; } body.petsmunity-app :is(.pm-tab,.pm-tabs button,.pm-segment,.pm-segmented button,.pm-option,.pm-menu-item,.pm-pagination a,.pm-pagination button,[role="tab"],[role="option"]):focus-visible{ outline:2px solid var(--pm-section-color)!important; outline-offset:2px; box-shadow:0 0 0 4px var(--pm-section-ring)!important; } /* Account/side navigation states. */ body.petsmunity-app :is(.pm-account-nav,.pm-side-nav,.pm-filter-panel) a:hover{ background:var(--pm-section-soft)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app :is(.pm-account-nav,.pm-side-nav,.pm-filter-panel) a:is(.is-active,.is-selected), body.petsmunity-app :is(.pm-account-nav,.pm-side-nav,.pm-filter-panel) a[aria-current="page"]{ background:var(--pm-section-soft-2)!important; border-color:var(--pm-section-color)!important; color:var(--pm-section-ink)!important; } /* Inputs, selects, textareas, search/location controls and native form controls. */ body.petsmunity-app :is(.pm-input,.pm-select,.pm-textarea,.pm-search-box,.pm-location-results):hover{ border-color:var(--pm-section-border)!important; } body.petsmunity-app :is(.pm-input,.pm-select,.pm-textarea,.pm-search-box,.pm-location-results):focus, body.petsmunity-app :is(.pm-input,.pm-select,.pm-textarea,.pm-search-box,.pm-location-results):focus-within, body.petsmunity-app :is(input,select,textarea):focus{ border-color:var(--pm-section-color)!important; outline-color:var(--pm-section-color)!important; box-shadow:0 0 0 3px var(--pm-section-ring)!important; } body.petsmunity-app :is(input[type="checkbox"],input[type="radio"],input[type="range"],progress){ accent-color:var(--pm-section-color)!important; } body.petsmunity-app [role="switch"][aria-checked="true"]{ background:var(--pm-section-color)!important; border-color:var(--pm-section-color)!important; } body.petsmunity-app :is(.pm-location-results button,.pm-location-results [role="option"]):hover{ background:var(--pm-section-soft)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app :is(.pm-location-results button,.pm-location-results [role="option"]):is(.is-active,.is-selected), body.petsmunity-app .pm-location-results [role="option"][aria-selected="true"]{ background:var(--pm-section-color)!important; color:var(--pm-section-on)!important; } /* Cards, rows and generic selected states. */ body.petsmunity-app :is(.pm-card,.pm-panel,.pm-post-card,.pm-pedigree-card,.pm-notification):hover{ border-color:var(--pm-section-border)!important; } body.petsmunity-app :is(.pm-card,.pm-panel,.pm-post-card,.pm-pedigree-card,.pm-notification):is(.is-active,.is-selected), body.petsmunity-app :is(.pm-card,.pm-panel,.pm-post-card,.pm-pedigree-card,.pm-notification)[aria-selected="true"]{ border-color:var(--pm-section-color)!important; box-shadow:0 0 0 2px var(--pm-section-ring)!important; } body.petsmunity-app .pm-table-wrap tbody tr:hover{ background:var(--pm-section-soft)!important; } body.petsmunity-app .pm-table-wrap tbody tr:is(.is-active,.is-selected), body.petsmunity-app .pm-table-wrap tbody tr[aria-selected="true"]{ background:var(--pm-section-soft-2)!important; box-shadow:inset 3px 0 0 var(--pm-section-color)!important; } /* Catch tiny custom controls that expose standard selected/pressed attributes. */ body.petsmunity-app :is(button,[role="button"])[aria-pressed="true"]:not(.pm-btn-accent):not(.pm-btn-dark):not([class*="danger"]):not([class*="error"]){ border-color:var(--pm-section-color)!important; } body.petsmunity-app [class*="pm-"].is-selected:not(.pm-chip-spotlight):not(.pm-chip-premier):not(.pm-chip-status):not([class*="danger"]):not([class*="error"]){ border-color:var(--pm-section-color)!important; } /* Consistent keyboard focus for every interactive control. */ body.petsmunity-app :where(a,button,input,select,textarea,[role="button"],[role="tab"],[role="option"],[role="switch"],[tabindex]):focus-visible{ outline-color:var(--pm-section-color)!important; } /* Text selection follows the current section without affecting layout. */ body.petsmunity-app ::selection{ background:var(--pm-section-soft-2); color:var(--pm-primary); } /* * Header navigation identity. * Every section icon owns its section color permanently. Changing pages must * never repaint all header icons with the active page color. */ body.petsmunity-app .pm-header a[href*="/find-a-pet"]{--pm-nav-section:var(--pm-color-find-pet);} body.petsmunity-app .pm-header a[href*="/supplies"]{--pm-nav-section:var(--pm-color-supplies);} body.petsmunity-app .pm-header a[href*="/services"]{--pm-nav-section:var(--pm-color-services);} body.petsmunity-app .pm-header a[href*="/lost-found"]{--pm-nav-section:var(--pm-color-lost-found);} body.petsmunity-app .pm-header a[href*="/pedigree-database"]{--pm-nav-section:var(--pm-color-pedigree);} body.petsmunity-app .pm-header a[href*="/microchip-registry"]{--pm-nav-section:var(--pm-color-microchip);} body.petsmunity-app .pm-header a[href*="/community"]{--pm-nav-section:var(--pm-color-community);} body.petsmunity-app .pm-header a[href*="/find-a-pet"], body.petsmunity-app .pm-header a[href*="/supplies"], body.petsmunity-app .pm-header a[href*="/services"], body.petsmunity-app .pm-header a[href*="/lost-found"], body.petsmunity-app .pm-header a[href*="/pedigree-database"], body.petsmunity-app .pm-header a[href*="/microchip-registry"], body.petsmunity-app .pm-header a[href*="/community"]{ color:var(--pm-primary)!important; } body.petsmunity-app .pm-header a[style*="--pm-nav-section"], body.petsmunity-app .pm-header a[href*="/find-a-pet"], body.petsmunity-app .pm-header a[href*="/supplies"], body.petsmunity-app .pm-header a[href*="/services"], body.petsmunity-app .pm-header a[href*="/lost-found"], body.petsmunity-app .pm-header a[href*="/pedigree-database"], body.petsmunity-app .pm-header a[href*="/microchip-registry"], body.petsmunity-app .pm-header a[href*="/community"]{ border-bottom-color:transparent; } /* Exact marketplace header icon colors (desktop). */ body.petsmunity-app .pm-market-section[href*="/find-a-pet"] .pm-market-section-icon{color:var(--pm-color-find-pet)!important;} body.petsmunity-app .pm-market-section[href*="/supplies"] .pm-market-section-icon{color:var(--pm-color-supplies)!important;} body.petsmunity-app .pm-market-section[href*="/services"] .pm-market-section-icon{color:var(--pm-color-services)!important;} body.petsmunity-app .pm-market-section[href*="/lost-found"] .pm-market-section-icon{color:var(--pm-color-lost-found)!important;} body.petsmunity-app .pm-market-section[href*="/pedigree-database"] .pm-market-section-icon{color:var(--pm-color-pedigree)!important;} body.petsmunity-app .pm-market-section[href*="/microchip-registry"] .pm-market-section-icon{color:var(--pm-color-microchip)!important;} body.petsmunity-app .pm-market-section[href*="/community"] .pm-market-section-icon{color:var(--pm-color-community)!important;} body.petsmunity-app .pm-market-section .pm-market-section-icon .pm-ui-icon{ color:inherit!important; stroke:currentColor!important; } body.petsmunity-app .pm-market-section .pm-market-section-icon .pm-ui-icon :is(path,circle,rect,line,polyline,polygon){ stroke:currentColor!important; } body.petsmunity-app .pm-market-section .pm-market-section-icon .pm-ui-icon [fill]:not([fill="none"]){ fill:currentColor!important; } body.petsmunity-app .pm-header a[href*="/find-a-pet"] :is(.pm-market-section-icon,.pm-ui-icon,.pm-nav-icon,svg), body.petsmunity-app .pm-header a[href*="/supplies"] :is(.pm-market-section-icon,.pm-ui-icon,.pm-nav-icon,svg), body.petsmunity-app .pm-header a[href*="/services"] :is(.pm-market-section-icon,.pm-ui-icon,.pm-nav-icon,svg), body.petsmunity-app .pm-header a[href*="/lost-found"] :is(.pm-market-section-icon,.pm-ui-icon,.pm-nav-icon,svg), body.petsmunity-app .pm-header a[href*="/pedigree-database"] :is(.pm-market-section-icon,.pm-ui-icon,.pm-nav-icon,svg), body.petsmunity-app .pm-header a[href*="/microchip-registry"] :is(.pm-market-section-icon,.pm-ui-icon,.pm-nav-icon,svg), body.petsmunity-app .pm-header a[href*="/community"] :is(.pm-market-section-icon,.pm-ui-icon,.pm-nav-icon,svg){ color:var(--pm-nav-section)!important; stroke:var(--pm-nav-section)!important; } body.petsmunity-app .pm-header a[href*="/find-a-pet"] :is(svg path,svg circle,svg rect,svg line,svg polyline,svg polygon), body.petsmunity-app .pm-header a[href*="/supplies"] :is(svg path,svg circle,svg rect,svg line,svg polyline,svg polygon), body.petsmunity-app .pm-header a[href*="/services"] :is(svg path,svg circle,svg rect,svg line,svg polyline,svg polygon), body.petsmunity-app .pm-header a[href*="/lost-found"] :is(svg path,svg circle,svg rect,svg line,svg polyline,svg polygon), body.petsmunity-app .pm-header a[href*="/pedigree-database"] :is(svg path,svg circle,svg rect,svg line,svg polyline,svg polygon), body.petsmunity-app .pm-header a[href*="/microchip-registry"] :is(svg path,svg circle,svg rect,svg line,svg polyline,svg polygon), body.petsmunity-app .pm-header a[href*="/community"] :is(svg path,svg circle,svg rect,svg line,svg polyline,svg polygon){ stroke:var(--pm-nav-section)!important; } body.petsmunity-app .pm-header a[href*="/find-a-pet"] svg [fill]:not([fill="none"]), body.petsmunity-app .pm-header a[href*="/supplies"] svg [fill]:not([fill="none"]), body.petsmunity-app .pm-header a[href*="/services"] svg [fill]:not([fill="none"]), body.petsmunity-app .pm-header a[href*="/lost-found"] svg [fill]:not([fill="none"]), body.petsmunity-app .pm-header a[href*="/pedigree-database"] svg [fill]:not([fill="none"]), body.petsmunity-app .pm-header a[href*="/microchip-registry"] svg [fill]:not([fill="none"]), body.petsmunity-app .pm-header a[href*="/community"] svg [fill]:not([fill="none"]){ fill:var(--pm-nav-section)!important; } body.petsmunity-app .pm-header a[href*="/find-a-pet"]:is(:hover,.is-active,[aria-current="page"]), body.petsmunity-app .pm-header a[href*="/supplies"]:is(:hover,.is-active,[aria-current="page"]), body.petsmunity-app .pm-header a[href*="/services"]:is(:hover,.is-active,[aria-current="page"]), body.petsmunity-app .pm-header a[href*="/lost-found"]:is(:hover,.is-active,[aria-current="page"]), body.petsmunity-app .pm-header a[href*="/pedigree-database"]:is(:hover,.is-active,[aria-current="page"]), body.petsmunity-app .pm-header a[href*="/microchip-registry"]:is(:hover,.is-active,[aria-current="page"]), body.petsmunity-app .pm-header a[href*="/community"]:is(:hover,.is-active,[aria-current="page"]){ background:color-mix(in srgb,var(--pm-nav-section) 12%,var(--pm-surface))!important; color:var(--pm-primary)!important; border-bottom-color:var(--pm-nav-section)!important; } /* Icons inside section-colored controls always inherit the exact control state. */ body.petsmunity-app :is(.pm-btn,.pm-chip,.pm-filter-chip,.pm-pill,.pm-tag,.pm-text-link,.pm-category-icon) :is(.pm-ui-icon,svg){ color:currentColor!important; } /* Filter panel actions always follow the current section color. */ body.petsmunity-app :is(.pm-filter-panel,.pm-filters,.pm-filter-sidebar) :is(.pm-btn-dark,button[type="submit"]){ background:var(--pm-section-color)!important; border-color:var(--pm-section-color)!important; color:var(--pm-section-on)!important; } body.petsmunity-app :is(.pm-filter-panel,.pm-filters,.pm-filter-sidebar) :is(.pm-btn-dark,button[type="submit"]):hover{ background:var(--pm-section-hover)!important; border-color:var(--pm-section-hover)!important; } body.petsmunity-app :is(.pm-filter-panel,.pm-filters,.pm-filter-sidebar) :is(.pm-btn-dark,button[type="submit"]):active{ background:var(--pm-section-active)!important; border-color:var(--pm-section-active)!important; } body.petsmunity-app :is(.pm-filter-panel,.pm-filters,.pm-filter-sidebar) :is(.pm-btn-dark,button[type="submit"]):focus-visible{ outline:2px solid var(--pm-section-color)!important; outline-offset:2px; box-shadow:0 0 0 4px var(--pm-section-ring)!important; } /* Header Location search: one clean control, never an input box inside a box. * Appearance only; native State -> City behavior is unchanged. */ body.petsmunity-app .pm-header-location-search{ box-sizing:border-box!important; display:flex!important; align-items:center!important; gap:10px!important; width:auto!important; max-width:calc(100% - 24px)!important; min-height:46px!important; margin:12px!important; padding:0 12px!important; background:var(--pm-surface)!important; border:1px solid var(--pm-border)!important; border-radius:var(--pm-radius-sm)!important; box-shadow:none!important; overflow:hidden!important; } body.petsmunity-app .pm-header-location-search > .pm-ui-icon, body.petsmunity-app .pm-header-location-search > svg{ width:18px!important; height:18px!important; flex:0 0 18px!important; } body.petsmunity-app #pm-header-location-query{ box-sizing:border-box!important; display:block!important; flex:1 1 auto!important; width:auto!important; min-width:0!important; height:44px!important; min-height:44px!important; padding:0!important; margin:0!important; background:transparent!important; border:0!important; border-radius:0!important; outline:0!important; box-shadow:none!important; color:var(--pm-text)!important; font:inherit!important; font-size:13px!important; line-height:44px!important; appearance:none!important; -webkit-appearance:none!important; } body.petsmunity-app #pm-header-location-query:hover, body.petsmunity-app #pm-header-location-query:focus, body.petsmunity-app #pm-header-location-query:focus-visible{ background:transparent!important; border:0!important; outline:0!important; box-shadow:none!important; } body.petsmunity-app .pm-header-location-search:focus-within{ border-color:var(--pm-section-color)!important; box-shadow:0 0 0 3px var(--pm-section-ring)!important; } body.petsmunity-app #pm-header-location-query::placeholder{ color:var(--pm-muted)!important; opacity:.9!important; } /* Filter Location has its own picker, but shares the exact same location * state with the global header picker in both directions. */ body.petsmunity-app :is(.pm-filter-panel,.pm-filters,.pm-filter-sidebar) :has(> input[data-pm-linked-location="1"]){ box-sizing:border-box!important; display:flex!important; align-items:center!important; gap:9px!important; width:100%!important; max-width:none!important; height:42px!important; min-height:42px!important; padding:0 12px!important; margin:0!important; background:var(--pm-surface)!important; border:1px solid var(--pm-border)!important; border-radius:10px!important; box-shadow:none!important; overflow:visible!important; position:relative!important; z-index:3; cursor:pointer!important; } body.petsmunity-app :is(.pm-filter-panel,.pm-filters,.pm-filter-sidebar) input[data-pm-linked-location="1"]{ box-sizing:border-box!important; display:block!important; flex:1 1 auto!important; width:100%!important; max-width:none!important; min-width:0!important; height:40px!important; min-height:40px!important; padding:0!important; margin:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; outline:0!important; color:var(--pm-text)!important; font:inherit!important; font-size:13px!important; line-height:40px!important; cursor:pointer!important; pointer-events:auto!important; } body.petsmunity-app :is(.pm-filter-panel,.pm-filters,.pm-filter-sidebar) input[data-pm-linked-location="1"]::placeholder{ color:var(--pm-muted)!important; opacity:.9!important; } body.petsmunity-app :is(.pm-filter-panel,.pm-filters,.pm-filter-sidebar) :has(> input[data-pm-linked-location="1"]) > :is(svg,.pm-ui-icon){ position:static!important; inset:auto!important; transform:none!important; width:16px!important; height:16px!important; flex:0 0 16px!important; margin:0!important; color:var(--pm-section-color)!important; stroke:var(--pm-section-color)!important; pointer-events:none!important; } body.petsmunity-app :is(.pm-filter-panel,.pm-filters,.pm-filter-sidebar) :has(> input[data-pm-linked-location="1"]):hover{ border-color:var(--pm-section-border)!important; } body.petsmunity-app :is(.pm-filter-panel,.pm-filters,.pm-filter-sidebar) :has(> input[data-pm-linked-location="1"]):focus-within{ border-color:var(--pm-section-color)!important; box-shadow:0 0 0 3px var(--pm-section-ring)!important; } body.petsmunity-app .pm-filter-location-popover{ position:relative!important; left:auto!important; top:auto!important; bottom:auto!important; z-index:2!important; width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; max-height:340px!important; overflow-y:auto!important; overflow-x:hidden!important; padding:10px!important; margin:7px 0 10px!important; background:var(--pm-surface)!important; border:1px solid var(--pm-border)!important; border-radius:12px!important; box-shadow:0 8px 22px rgba(23,50,77,.10)!important; cursor:default!important; } body.petsmunity-app .pm-filter-location-popover.pm-open-down, body.petsmunity-app .pm-filter-location-popover.pm-open-up{ top:auto!important; bottom:auto!important; } body.petsmunity-app .pm-filter-location-popover.pm-hide{ display:none!important; } body.petsmunity-app .pm-filter-location-search{ display:flex!important; align-items:center!important; gap:9px!important; width:100%!important; height:42px!important; padding:0 11px!important; margin:0 0 8px!important; background:var(--pm-surface)!important; border:1px solid var(--pm-border)!important; border-radius:9px!important; box-shadow:none!important; } body.petsmunity-app .pm-filter-location-search:focus-within{ border-color:var(--pm-section-color)!important; box-shadow:0 0 0 3px var(--pm-section-ring)!important; } body.petsmunity-app .pm-filter-location-search>svg{ position:static!important; width:16px!important; height:16px!important; flex:0 0 16px!important; color:var(--pm-muted)!important; stroke:var(--pm-muted)!important; } body.petsmunity-app .pm-filter-location-query{ flex:1 1 auto!important; width:100%!important; min-width:0!important; height:40px!important; padding:0!important; margin:0!important; background:transparent!important; border:0!important; border-radius:0!important; outline:0!important; box-shadow:none!important; color:var(--pm-text)!important; font:inherit!important; font-size:13px!important; } body.petsmunity-app .pm-filter-location-query:focus{ border:0!important; outline:0!important; box-shadow:none!important; } body.petsmunity-app .pm-filter-current-location, body.petsmunity-app .pm-filter-location-nationwide, body.petsmunity-app .pm-filter-location-back, body.petsmunity-app .pm-filter-location-state-all, body.petsmunity-app .pm-filter-state-option, body.petsmunity-app .pm-filter-city-option, body.petsmunity-app .pm-filter-search-option, body.petsmunity-app .pm-filter-location-more{ display:flex!important; align-items:center!important; gap:9px!important; width:100%!important; min-height:38px!important; padding:8px 8px!important; margin:0!important; background:transparent!important; border:0!important; border-radius:8px!important; color:var(--pm-text)!important; text-align:left!important; cursor:pointer!important; font:inherit!important; font-size:12px!important; } body.petsmunity-app :is(.pm-filter-current-location,.pm-filter-location-nationwide,.pm-filter-location-state-all){ color:var(--pm-section-color)!important; font-weight:700!important; } body.petsmunity-app :is(.pm-filter-current-location,.pm-filter-location-nationwide,.pm-filter-location-back,.pm-filter-location-state-all,.pm-filter-state-option,.pm-filter-city-option,.pm-filter-search-option,.pm-filter-location-more):hover{ background:var(--pm-section-soft)!important; } body.petsmunity-app :is(.pm-filter-current-location,.pm-filter-location-back) > svg{ width:17px!important; height:17px!important; flex:0 0 17px!important; position:static!important; color:var(--pm-section-color)!important; stroke:var(--pm-section-color)!important; } body.petsmunity-app :is(.pm-filter-state-option,.pm-filter-city-option)>svg{ width:14px!important; height:14px!important; margin-left:auto!important; flex:0 0 14px!important; position:static!important; color:var(--pm-muted)!important; stroke:var(--pm-muted)!important; } body.petsmunity-app :is(.pm-filter-city-option,.pm-filter-search-option)>span{ display:flex!important; flex-direction:column!important; min-width:0!important; } body.petsmunity-app :is(.pm-filter-city-option,.pm-filter-search-option) strong{ font-size:12px!important; line-height:1.3!important; color:var(--pm-text)!important; } body.petsmunity-app :is(.pm-filter-city-option,.pm-filter-search-option) small{ margin-top:2px!important; font-size:10px!important; color:var(--pm-muted)!important; } body.petsmunity-app .pm-filter-location-divider{ height:1px!important; margin:7px -10px 8px!important; background:var(--pm-border)!important; } body.petsmunity-app .pm-filter-location-title{ padding:5px 8px 4px!important; font-size:10px!important; font-weight:700!important; color:var(--pm-muted)!important; } body.petsmunity-app .pm-filter-location-list{ width:100%!important; } body.petsmunity-app .pm-filter-location-more{ justify-content:center!important; margin-top:4px!important; border:1px solid var(--pm-border)!important; color:var(--pm-section-color)!important; font-weight:700!important; } body.petsmunity-app .pm-filter-location-popover .pm-location-loading{ padding:12px 8px!important; font-size:11px!important; color:var(--pm-muted)!important; } /* Searchable Species + Listing type controls: type directly in the field and * filter the existing native select options without changing filter behavior. */ body.petsmunity-app .pm-searchable-filter{ position:relative!important; width:100%!important; z-index:8; } body.petsmunity-app .pm-searchable-filter.is-open{ z-index:120!important; } body.petsmunity-app .pm-searchable-filter-native{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; opacity:0!important; pointer-events:none!important; } body.petsmunity-app .pm-searchable-filter-control{ display:flex!important; align-items:center!important; width:100%!important; height:42px!important; padding:0 11px!important; background:var(--pm-surface)!important; border:1px solid var(--pm-border)!important; border-radius:10px!important; box-shadow:none!important; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important; } body.petsmunity-app .pm-searchable-filter-control:hover{ border-color:var(--pm-section-border)!important; } body.petsmunity-app .pm-searchable-filter-control:focus-within{ border-color:var(--pm-section-color)!important; box-shadow:0 0 0 3px var(--pm-section-ring)!important; } body.petsmunity-app .pm-searchable-filter-input{ flex:1 1 auto!important; width:100%!important; min-width:0!important; height:40px!important; padding:0!important; margin:0!important; background:transparent!important; border:0!important; border-radius:0!important; outline:0!important; box-shadow:none!important; color:var(--pm-text)!important; font:inherit!important; font-size:13px!important; line-height:40px!important; } body.petsmunity-app .pm-searchable-filter-input:focus{ border:0!important; outline:0!important; box-shadow:none!important; } body.petsmunity-app .pm-searchable-filter-clear{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:22px!important; height:22px!important; flex:0 0 22px!important; padding:0!important; margin:0 2px 0 6px!important; background:transparent!important; border:0!important; border-radius:50%!important; color:var(--pm-muted)!important; font:inherit!important; font-size:18px!important; font-weight:500!important; line-height:1!important; cursor:pointer!important; } body.petsmunity-app .pm-searchable-filter-clear[hidden]{ display:none!important; } body.petsmunity-app .pm-searchable-filter-clear:hover{ background:var(--pm-section-soft)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app .pm-searchable-filter-clear:focus-visible{ outline:2px solid var(--pm-section-color)!important; outline-offset:1px!important; } body.petsmunity-app .pm-searchable-filter-control>svg{ position:static!important; width:15px!important; height:15px!important; flex:0 0 15px!important; margin-left:4px!important; color:var(--pm-muted)!important; stroke:var(--pm-muted)!important; cursor:pointer!important; } body.petsmunity-app .pm-searchable-filter-menu{ display:none!important; position:absolute!important; left:0!important; top:calc(100% + 5px)!important; z-index:90!important; width:100%!important; max-height:240px!important; overflow-y:auto!important; overflow-x:hidden!important; padding:5px!important; background:var(--pm-surface)!important; border:1px solid var(--pm-border)!important; border-radius:10px!important; box-shadow:0 12px 28px rgba(23,50,77,.14)!important; } body.petsmunity-app .pm-searchable-filter.is-open .pm-searchable-filter-menu{ display:block!important; } body.petsmunity-app .pm-searchable-filter-option{ display:flex!important; align-items:center!important; width:100%!important; min-height:36px!important; padding:7px 9px!important; margin:0!important; background:transparent!important; border:0!important; border-radius:7px!important; color:var(--pm-text)!important; text-align:left!important; font:inherit!important; font-size:12px!important; cursor:pointer!important; } body.petsmunity-app .pm-searchable-filter-option:hover{ background:var(--pm-section-soft)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app .pm-searchable-filter-option.is-selected, body.petsmunity-app .pm-searchable-filter-option[aria-selected="true"]{ background:var(--pm-section-soft-2)!important; color:var(--pm-section-ink)!important; font-weight:700!important; } body.petsmunity-app .pm-searchable-filter-empty{ padding:10px 9px!important; font-size:11px!important; color:var(--pm-muted)!important; } body.petsmunity-app .pm-header-location-popover{ overflow-x:hidden!important; } body.petsmunity-app :is(.pm-header-state-list,.pm-header-city-list,.pm-header-location-results){ max-width:100%!important; overflow-x:hidden!important; } /* Keep Save Search as one compact horizontal action in every marketplace * section where the button is rendered. */ body.petsmunity-app .pm-save-search-one-line{ display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; flex-wrap:nowrap!important; gap:7px!important; width:auto!important; min-width:116px!important; max-width:none!important; min-height:48px!important; padding:0 14px!important; white-space:nowrap!important; line-height:1!important; text-align:center!important; } body.petsmunity-app .pm-save-search-one-line > span, body.petsmunity-app .pm-save-search-one-line > strong{ display:inline!important; width:auto!important; max-width:none!important; white-space:nowrap!important; line-height:1!important; } body.petsmunity-app .pm-save-search-one-line > svg, body.petsmunity-app .pm-save-search-one-line .pm-ui-icon{ flex:0 0 auto!important; margin:0!important; } /* The Filters action is useful on narrow screens where the sidebar collapses. * On desktop the filter sidebar is already visible, so the extra button is redundant. */ @media (min-width:901px){ body.petsmunity-app .pm-desktop-filter-toggle{ display:none!important; } } @media (max-width:900px){ body.petsmunity-app .pm-desktop-filter-toggle{ display:inline-flex!important; } } /* One compact sort control across marketplace result pages. */ body.petsmunity-app .pm-results-sort{ width:180px!important; min-width:180px!important; max-width:180px!important; height:48px!important; min-height:48px!important; padding:0 38px 0 14px!important; margin-left:auto!important; justify-self:end!important; flex:0 0 180px!important; border:1px solid var(--pm-border)!important; border-radius:10px!important; background-color:var(--pm-surface)!important; color:var(--pm-text)!important; font:inherit!important; font-size:13px!important; box-shadow:none!important; } body.petsmunity-app .pm-results-sort:hover{ border-color:var(--pm-section-border)!important; } body.petsmunity-app .pm-results-sort:focus{ border-color:var(--pm-section-color)!important; box-shadow:0 0 0 3px var(--pm-section-ring)!important; outline:0!important; } body.petsmunity-app .pm-results-sort-host{ min-width:0!important; } body.petsmunity-app .pm-results-toolbar-fixed{ display:flex!important; align-items:center!important; gap:10px!important; width:100%!important; } body.petsmunity-app .pm-results-toolbar-fixed .pm-results-sort{ margin-left:auto!important; } /* Pedigree cards include an image area. Real animal photos are shown whenever * image_url exists; otherwise an honest, branded no-photo placeholder is used. */ body.petsmunity-app .pm-pedigree-card-with-media{ overflow:hidden!important; padding:0!important; } body.petsmunity-app .pm-pedigree-card-with-media > :not(.pm-pedigree-card-media){ margin-left:16px!important; margin-right:16px!important; } body.petsmunity-app .pm-pedigree-card-with-media > :last-child{ margin-bottom:16px!important; } body.petsmunity-app .pm-pedigree-card-media{ width:100%!important; height:190px!important; margin:0 0 14px!important; overflow:hidden!important; background:var(--pm-section-soft)!important; border-bottom:1px solid var(--pm-border)!important; } body.petsmunity-app .pm-pedigree-card-media img{ display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; object-position:center center!important; background:var(--pm-bg,#f7f9fa)!important; } body.petsmunity-app .pm-pedigree-photo-placeholder{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:8px!important; width:100%!important; height:100%!important; color:var(--pm-section-ink)!important; background:linear-gradient(135deg,var(--pm-section-soft),var(--pm-surface))!important; } body.petsmunity-app .pm-pedigree-photo-placeholder svg{ width:68px!important; height:68px!important; fill:none!important; stroke:var(--pm-section-color)!important; stroke-width:2!important; stroke-linecap:round!important; stroke-linejoin:round!important; opacity:.72!important; } body.petsmunity-app .pm-pedigree-photo-placeholder span{ font-size:12px!important; font-weight:600!important; color:var(--pm-muted)!important; } /* Section-aware hover states for primary marketplace actions. * This prevents teal hover leaking into Services, Supplies, Lost & Found, etc. */ body.petsmunity-app .pm-section-action-fill{ transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important; } body.petsmunity-app .pm-section-action-fill:hover{ background:var(--pm-section-hover)!important; border-color:var(--pm-section-hover)!important; color:var(--pm-section-on)!important; box-shadow:0 4px 12px var(--pm-section-ring)!important; } body.petsmunity-app .pm-section-action-fill:active{ background:var(--pm-section-active)!important; border-color:var(--pm-section-active)!important; color:var(--pm-section-on)!important; } body.petsmunity-app .pm-section-action-outline:hover{ background:var(--pm-section-soft)!important; border-color:var(--pm-section-color)!important; color:var(--pm-section-ink)!important; } body.petsmunity-app .pm-section-action-outline:active{ background:var(--pm-section-soft-2)!important; border-color:var(--pm-section-color)!important; color:var(--pm-section-ink)!important; } /* Filled and outline actions use the section aliases defined at the top of the Design System. */ /* Filled actions: page CTA, Apply filters and the header Search button. */ body.petsmunity-app:is( .pm-view-find-a-pet, .pm-view-supplies, .pm-view-services, .pm-view-lost-found, .pm-view-pedigree-database, .pm-view-microchip-registry, .pm-view-community ) :is( .pm-main .pm-btn-primary, .pm-main .pm-btn-accent, .pm-filter-panel .pm-btn-dark, .pm-section-action-fill, .pm-header-search-button ){ background:var(--pm-action-color)!important; border-color:var(--pm-action-color)!important; color:var(--pm-action-on)!important; } body.petsmunity-app:is( .pm-view-find-a-pet, .pm-view-supplies, .pm-view-services, .pm-view-lost-found, .pm-view-pedigree-database, .pm-view-microchip-registry, .pm-view-community ) :is( .pm-main .pm-btn-primary, .pm-main .pm-btn-accent, .pm-filter-panel .pm-btn-dark, .pm-section-action-fill, .pm-header-search-button ):hover{ background:var(--pm-action-hover)!important; border-color:var(--pm-action-hover)!important; color:var(--pm-action-on)!important; } body.petsmunity-app:is( .pm-view-find-a-pet, .pm-view-supplies, .pm-view-services, .pm-view-lost-found, .pm-view-pedigree-database, .pm-view-microchip-registry, .pm-view-community ) :is( .pm-main .pm-btn-primary, .pm-main .pm-btn-accent, .pm-filter-panel .pm-btn-dark, .pm-section-action-fill, .pm-header-search-button ):active{ background:var(--pm-action-active)!important; border-color:var(--pm-action-active)!important; color:var(--pm-action-on)!important; } body.petsmunity-app:is( .pm-view-find-a-pet, .pm-view-supplies, .pm-view-services, .pm-view-lost-found, .pm-view-pedigree-database, .pm-view-microchip-registry, .pm-view-community ) :is( .pm-main .pm-btn-primary, .pm-main .pm-btn-accent, .pm-filter-panel .pm-btn-dark, .pm-section-action-fill, .pm-header-search-button ):focus-visible{ outline:2px solid var(--pm-action-color)!important; outline-offset:2px!important; box-shadow:0 0 0 4px color-mix(in srgb,var(--pm-action-color) 24%,transparent)!important; } /* Outline actions in the results toolbar: Save Search and mobile Filters. */ body.petsmunity-app:is( .pm-view-find-a-pet, .pm-view-supplies, .pm-view-services, .pm-view-lost-found ) :is( .pm-results-head .pm-btn-light, .pm-toolbar .pm-btn-light, .pm-section-action-outline ){ background:var(--pm-surface)!important; border-color:color-mix(in srgb,var(--pm-action-color) 38%,var(--pm-surface))!important; color:var(--pm-action-ink)!important; } body.petsmunity-app:is( .pm-view-find-a-pet, .pm-view-supplies, .pm-view-services, .pm-view-lost-found ) :is( .pm-results-head .pm-btn-light, .pm-toolbar .pm-btn-light, .pm-section-action-outline ):hover{ background:var(--pm-action-soft)!important; border-color:var(--pm-action-color)!important; color:var(--pm-action-ink)!important; } body.petsmunity-app:is( .pm-view-find-a-pet, .pm-view-supplies, .pm-view-services, .pm-view-lost-found ) :is( .pm-results-head .pm-btn-light, .pm-toolbar .pm-btn-light, .pm-section-action-outline ):active{ background:color-mix(in srgb,var(--pm-action-color) 18%,var(--pm-surface))!important; border-color:var(--pm-action-color)!important; color:var(--pm-action-ink)!important; } /* Search scope check should follow the active section too. */ body.petsmunity-app:is( .pm-view-find-a-pet, .pm-view-supplies, .pm-view-services, .pm-view-lost-found ) .pm-header-scope-check input:checked + .pm-header-scope-box{ background:var(--pm-action-color)!important; border-color:var(--pm-action-color)!important; color:var(--pm-action-on)!important; } @media (max-width:700px){ body.petsmunity-app .pm-results-sort{ width:150px!important; min-width:150px!important; max-width:150px!important; flex-basis:150px!important; } body.petsmunity-app .pm-pedigree-card-media{ height:165px!important; } } /* Lost & Found card cleanup — centralized in PetsMunity Design System */ /* Lost & Found cards are previews. Full identifying details belong on the report page. */ .pm-lost-card .pm-lost-description{display:none!important} .pm-lost-card h3 + .pm-card-meta-line{display:none!important} .pm-lost-card .pm-card-body{display:flex;flex-direction:column} .pm-lost-card .pm-card-body>.pm-card-meta-line:last-child{margin-top:auto;padding-top:14px} .pm-lost-card .pm-card-body>h3{margin-bottom:10px} /* Category hover animals: professionally designed, consistent solid silhouettes. */ body.petsmunity-app .pm-home-categories .pm-category-photo-hover svg{ width:34px!important;height:34px!important; fill:currentColor!important;stroke:none!important; } body.petsmunity-app .pm-home-categories .pm-category-photo-hover{ background:rgba(23,50,77,.78)!important; } body.petsmunity-app .pm-home-categories .pm-category-tile:focus-visible .pm-category-photo-hover{ opacity:1!important; } /* Item ratings: deliberately restricted to Supplies and Services cards. * Price stays left and rating stays right on the same primary row. */ body.petsmunity-app:is(.pm-view-supplies,.pm-view-services) .pm-card-primary-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; width:100%!important; min-height:20px!important; margin:0 0 4px!important; } body.petsmunity-app:is(.pm-view-supplies,.pm-view-services) .pm-card-primary-row > .pm-card-price{ flex:1 1 auto!important; min-width:0!important; min-height:0!important; margin:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } body.petsmunity-app:is(.pm-view-supplies,.pm-view-services) .pm-item-rating{ display:inline-flex!important; align-items:center!important; justify-content:flex-end!important; gap:4px!important; flex:0 0 auto!important; min-height:18px!important; margin:0!important; white-space:nowrap!important; font-size:12px!important; line-height:1.2!important; font-weight:600!important; color:var(--pm-text)!important; } body.petsmunity-app:is(.pm-view-supplies,.pm-view-services) .pm-item-rating-star{ color:var(--pm-warning)!important; font-size:14px!important; line-height:1!important; } body.petsmunity-app:is(.pm-view-supplies,.pm-view-services) .pm-item-rating-value{ color:var(--pm-text)!important; font-variant-numeric:tabular-nums; } body.petsmunity-app:is(.pm-view-supplies,.pm-view-services) .pm-item-rating-count{ color:var(--pm-muted)!important; font-weight:500!important; font-variant-numeric:tabular-nums; } /* Unified marketplace card shell: Find a Pet + Supplies + Services. * Structure stays identical; only the section-specific metadata changes. */ body.petsmunity-app:is(.pm-view-find-a-pet,.pm-view-supplies,.pm-view-services) .pm-card.pm-market-card.pm-card-unified{ display:flex!important; flex-direction:column!important; height:100%!important; min-height:0!important; } body.petsmunity-app:is(.pm-view-find-a-pet,.pm-view-supplies,.pm-view-services) .pm-card-unified .pm-card-media, body.petsmunity-app.pm-view-services .pm-card-unified .pm-service-media{ aspect-ratio:var(--pm-media-ratio,1.333)!important; flex:0 0 auto!important; } body.petsmunity-app:is(.pm-view-find-a-pet,.pm-view-supplies,.pm-view-services) .pm-card-unified .pm-card-body{ display:flex!important; flex-direction:column!important; flex:1 1 auto!important; min-height:148px!important; padding:10px 11px 11px!important; } body.petsmunity-app:is(.pm-view-find-a-pet,.pm-view-supplies,.pm-view-services) .pm-card-unified .pm-card-price{ min-height:19px!important; margin:0 0 4px!important; font-size:var(--pm-price-font,17px)!important; font-weight:800!important; line-height:1.1!important; color:var(--pm-primary,#17324D)!important; } body.petsmunity-app:is(.pm-view-find-a-pet,.pm-view-supplies,.pm-view-services) .pm-card-unified h3{ margin:0 0 6px!important; min-height:2.55em!important; font-size:var(--pm-listing-title,15px)!important; line-height:1.28!important; font-weight:700!important; display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; white-space:normal!important; text-overflow:clip!important; overflow:hidden!important; } body.petsmunity-app:is(.pm-view-find-a-pet,.pm-view-supplies,.pm-view-services) .pm-card-unified .pm-card-meta-line{ min-height:18px!important; margin-top:5px!important; font-size:11px!important; line-height:1.3!important; } body.petsmunity-app:is(.pm-view-find-a-pet,.pm-view-supplies,.pm-view-services) .pm-card-unified .pm-card-body > .pm-card-meta-line:last-child{ margin-top:auto!important; padding-top:6px!important; } /* Rating shares the primary row with price in both rated sections. */ body.petsmunity-app:is(.pm-view-supplies,.pm-view-services) .pm-card-unified .pm-card-primary-row .pm-item-rating{ margin:0!important; min-height:18px!important; } /* Services keep their own data, but inside the universal shell: * price + rating -> title -> category -> provider/location footer. */ body.petsmunity-app.pm-view-services .pm-card-unified .pm-service-category-row{ color:var(--pm-muted)!important; } body.petsmunity-app.pm-view-services .pm-card-unified .pm-service-unified-footer{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; width:100%!important; border:0!important; color:var(--pm-muted)!important; } body.petsmunity-app.pm-view-services .pm-card-unified .pm-card-ownerline.pm-service-footer-owner{ display:flex!important; align-items:center!important; gap:6px!important; flex:1 1 auto!important; min-width:0!important; margin:0!important; color:var(--pm-muted)!important; font-size:11px!important; } body.petsmunity-app.pm-view-services .pm-card-unified .pm-service-footer-owner .pm-avatar{ width:20px!important; height:20px!important; flex:0 0 20px!important; } body.petsmunity-app.pm-view-services .pm-card-unified .pm-service-footer-owner span{ min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } body.petsmunity-app.pm-view-services .pm-card-unified .pm-service-footer-location{ display:flex!important; align-items:center!important; gap:3px!important; flex:0 0 auto!important; max-width:46%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; color:var(--pm-muted)!important; } body.petsmunity-app.pm-view-services .pm-card-unified .pm-service-footer-location .pm-ui-icon{ width:12px!important; height:12px!important; flex:0 0 12px!important; } @media (max-width:700px){ body.petsmunity-app:is(.pm-view-find-a-pet,.pm-view-supplies,.pm-view-services) .pm-card-unified .pm-card-body{ min-height:142px!important; } } /* Microchip lookup contact card — public owner contact for a verified registration. */ body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-card{ margin-top:14px!important; padding:16px!important; border:1px solid color-mix(in srgb,var(--pm-section-color) 34%,var(--pm-border))!important; border-radius:12px!important; background:var(--pm-surface)!important; box-shadow:0 6px 18px rgba(23,50,77,.055)!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-head{ display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:14px!important; margin-bottom:12px!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-kicker{ display:block!important; margin-bottom:3px!important; color:var(--pm-section-ink)!important; font-size:10px!important; font-weight:800!important; letter-spacing:.055em!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-head h3{ margin:0!important; font-size:18px!important; line-height:1.2!important; color:var(--pm-text)!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-status{ flex:0 0 auto!important; padding:4px 8px!important; border-radius:999px!important; background:var(--pm-section-soft)!important; color:var(--pm-section-ink)!important; font-size:11px!important; font-weight:750!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-details{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; margin-bottom:12px!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-details>div{ min-width:0!important; padding:10px 11px!important; border:1px solid var(--pm-border)!important; border-radius:9px!important; background:var(--pm-bg,#f7f9fa)!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-details span, body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-details strong{ display:block!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-details span{ margin-bottom:3px!important; color:var(--pm-muted)!important; font-size:10px!important; font-weight:650!important; text-transform:uppercase!important; letter-spacing:.035em!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-details strong{ color:var(--pm-text)!important; font-size:13px!important; line-height:1.35!important; overflow:hidden!important; text-overflow:ellipsis!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-actions{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-action{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:42px!important; margin:0!important; } body.petsmunity-app.pm-view-microchip-registry .pm-chip-register-missing{ margin-top:10px!important; } @media (max-width:700px){ body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-details, body.petsmunity-app.pm-view-microchip-registry .pm-chip-contact-actions{ grid-template-columns:1fr!important; } } /* User-uploaded marketplace media should show the whole photo without * changing the card/layout dimensions. Only the image fitting mode changes. */ body.petsmunity-app .pm-main :is( .pm-card-media, .pm-service-media, .pm-pedigree-card-media ) img{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center center!important; background:var(--pm-bg,#f2f6f8)!important; } /* Uploaded marketplace media uses contain only in media contexts. */ body.petsmunity-app .pm-main .pm-user-media-contain{ object-fit:contain!important; object-position:center center!important; } body.petsmunity-app .pm-main .pm-user-bg-contain{ background-size:contain!important; background-position:center center!important; background-repeat:no-repeat!important; } body.petsmunity-app .pm-main :is(.pm-avatar,.pm-user-avatar,.pm-profile-avatar,.pm-owner-avatar,[class*="avatar"]) img, body.petsmunity-app .pm-main img:is(.pm-avatar,.pm-user-avatar,.pm-profile-avatar,.pm-owner-avatar){ object-fit:cover!important; } /* Service photo viewer. The service page itself uses the native listing-detail classes. */ body.pm-service-lightbox-open{overflow:hidden!important} .pm-service-lightbox{ position:fixed!important; inset:0!important; z-index:1000000!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:24px!important; background:rgba(8,18,28,.92)!important; } .pm-service-lightbox-viewer{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; width:min(96vw,1400px)!important; height:min(92vh,980px)!important; } .pm-service-lightbox-viewer>img{ width:100%!important; height:100%!important; object-fit:contain!important; } .pm-service-lightbox-close{ position:absolute!important; top:0!important; right:0!important; z-index:2!important; display:flex!important; align-items:center!important; justify-content:center!important; width:42px!important; height:42px!important; padding:0!important; border:1px solid rgba(255,255,255,.22)!important; border-radius:50%!important; background:rgba(255,255,255,.96)!important; color:#17324d!important; box-shadow:0 8px 24px rgba(0,0,0,.22)!important; font-size:28px!important; cursor:pointer!important; } @media (max-width:820px){ .pm-service-lightbox{padding:12px!important} .pm-service-lightbox-viewer{width:100%!important;height:88vh!important} } /* Detail-side location icon uses the same outline map-pin language as listing pages. */ body.petsmunity-app .pm-location-row{ display:flex!important; align-items:center!important; gap:8px!important; } body.petsmunity-app .pm-location-icon{ width:17px!important; height:17px!important; flex:0 0 17px!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important; } /* Favorites account: section-based saved-item tabs. */ body.petsmunity-app .pm-favorites-page{ padding-top:28px!important; padding-bottom:48px!important; } body.petsmunity-app .pm-favorites-page .pm-page-title-row{ margin-bottom:18px!important; } body.petsmunity-app .pm-favorites-page .pm-page-title-row h1{ margin:0 0 5px!important; } body.petsmunity-app .pm-favorites-page .pm-page-title-row p{ margin:0!important; color:var(--pm-muted)!important; } body.petsmunity-app .pm-fav-tabs{ display:flex!important; gap:8px!important; overflow-x:auto!important; padding:4px 0 14px!important; margin-bottom:14px!important; scrollbar-width:none!important; } body.petsmunity-app .pm-fav-tabs::-webkit-scrollbar{display:none!important} body.petsmunity-app .pm-fav-tab{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; flex:0 0 auto!important; min-height:42px!important; padding:0 15px!important; border:1px solid var(--pm-border)!important; border-radius:999px!important; background:#fff!important; color:var(--pm-primary)!important; font:inherit!important; font-weight:700!important; cursor:pointer!important; } body.petsmunity-app .pm-fav-tab strong{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:24px!important; height:24px!important; padding:0 7px!important; border-radius:999px!important; background:#f2f6f8!important; font-size:12px!important; } body.petsmunity-app .pm-fav-tab.is-active{ border-color:var(--pm-secondary)!important; background:color-mix(in srgb,var(--pm-secondary) 9%,white)!important; color:var(--pm-secondary)!important; } body.petsmunity-app .pm-fav-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; } body.petsmunity-app .pm-fav-card{ overflow:hidden!important; border:1px solid var(--pm-border)!important; border-radius:var(--pm-radius)!important; background:#fff!important; box-shadow:var(--pm-card-shadow)!important; } body.petsmunity-app .pm-fav-media{ display:block!important; aspect-ratio:4/3!important; background:#f2f6f8!important; overflow:hidden!important; } body.petsmunity-app .pm-fav-media img{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; } body.petsmunity-app .pm-fav-placeholder{ display:grid!important; place-items:center!important; width:100%!important; height:100%!important; color:var(--pm-muted)!important; } body.petsmunity-app .pm-fav-body{padding:13px!important} body.petsmunity-app .pm-fav-price{ margin-bottom:4px!important; color:var(--pm-primary)!important; font-size:17px!important; font-weight:800!important; } body.petsmunity-app .pm-fav-title{ display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; min-height:40px!important; color:var(--pm-text)!important; font-weight:750!important; line-height:1.35!important; text-decoration:none!important; } body.petsmunity-app .pm-fav-meta{ margin-top:8px!important; color:var(--pm-muted)!important; font-size:12px!important; } body.petsmunity-app .pm-fav-remove{ margin-top:12px!important; padding:0!important; border:0!important; background:transparent!important; color:var(--pm-secondary)!important; font:inherit!important; font-weight:700!important; cursor:pointer!important; } body.petsmunity-app .pm-fav-empty{ grid-column:1/-1!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:5px!important; min-height:210px!important; padding:28px!important; border:1px dashed var(--pm-border)!important; border-radius:var(--pm-radius)!important; background:#fff!important; text-align:center!important; } body.petsmunity-app .pm-fav-empty span{color:var(--pm-muted)!important} @media(max-width:1100px){ body.petsmunity-app .pm-fav-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} } @media(max-width:820px){ body.petsmunity-app .pm-fav-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:560px){ body.petsmunity-app .pm-fav-grid{grid-template-columns:1fr!important} } /* Unified detail action icons. */ body.petsmunity-app .pm-side-card :is(button,a), body.petsmunity-app .pm-service-detail-contact :is(button,a){ gap:8px!important; } body.petsmunity-app .pm-action-icon{ width:18px!important; height:18px!important; flex:0 0 18px!important; fill:none!important; stroke:currentColor!important; stroke-width:1.9!important; stroke-linecap:round!important; stroke-linejoin:round!important; pointer-events:none!important; } body.petsmunity-app [aria-pressed="true"] .pm-action-icon-heart{ fill:currentColor!important; } body.petsmunity-app [aria-pressed="true"] .pm-action-icon-heart path{ fill:currentColor!important; } /* Home Lost & Found + Pedigree showcases use the same substantial card scale as marketplace listings. */ body.petsmunity-app .pm-home-showcase-section{ padding:34px 0!important; } body.petsmunity-app .pm-home-showcase-lost{ background:#f2f6f8!important; } body.petsmunity-app .pm-home-showcase-pedigree{ background:#fff!important; } body.petsmunity-app .pm-home-showcase-wrap{ /* Use the exact same .pm-container width/alignment as Find a Pet. */ padding:0!important; } body.petsmunity-app .pm-home-showcase-head{ display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:24px!important; margin-bottom:18px!important; } body.petsmunity-app .pm-home-showcase-kicker{ margin-bottom:4px!important; color:var(--pm-secondary)!important; font-size:11px!important; font-weight:850!important; letter-spacing:.09em!important; } body.petsmunity-app .pm-home-showcase-head h2{ margin:0!important; color:var(--pm-primary)!important; font-size:clamp(24px,2vw,32px)!important; line-height:1.08!important; } body.petsmunity-app .pm-home-showcase-head p{ margin:7px 0 0!important; color:var(--pm-muted)!important; } body.petsmunity-app .pm-home-showcase-link{ flex:0 0 auto!important; color:var(--pm-secondary)!important; font-weight:800!important; text-decoration:none!important; white-space:nowrap!important; } body.petsmunity-app .pm-home-showcase-grid{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:14px!important; } body.petsmunity-app .pm-home-showcase-card{ display:block!important; overflow:hidden!important; min-width:0!important; border:1px solid var(--pm-border)!important; border-radius:var(--pm-radius)!important; background:#fff!important; box-shadow:var(--pm-card-shadow)!important; color:inherit!important; text-decoration:none!important; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease!important; } body.petsmunity-app .pm-home-showcase-card:hover{ border-color:color-mix(in srgb,var(--pm-secondary) 42%,var(--pm-border))!important; box-shadow:0 8px 24px rgba(23,50,77,.09)!important; transform:translateY(-1px)!important; } body.petsmunity-app .pm-home-showcase-media{ display:grid!important; place-items:center!important; width:100%!important; aspect-ratio:4/3!important; overflow:hidden!important; background:#f3f6f8!important; } body.petsmunity-app .pm-home-showcase-media img{ display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; } body.petsmunity-app .pm-home-showcase-media .pm-pedigree-photo-placeholder{ width:100%!important; height:100%!important; min-height:0!important; } body.petsmunity-app .pm-home-showcase-body{ padding:14px 14px 15px!important; } body.petsmunity-app .pm-home-showcase-card-top{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; margin-bottom:8px!important; } body.petsmunity-app .pm-home-showcase-chip{ display:inline-flex!important; align-items:center!important; min-height:24px!important; padding:0 9px!important; border-radius:999px!important; font-size:11px!important; font-weight:850!important; } body.petsmunity-app .pm-home-showcase-chip.is-lost{ background:color-mix(in srgb,var(--pm-color-lost-found) 13%,white)!important; color:var(--pm-color-lost-found)!important; } body.petsmunity-app .pm-home-showcase-chip.is-found{ background:color-mix(in srgb,var(--pm-secondary) 12%,white)!important; color:var(--pm-secondary)!important; } body.petsmunity-app .pm-home-showcase-date{ color:var(--pm-muted)!important; font-size:11px!important; } body.petsmunity-app .pm-home-showcase-card h3{ display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; min-height:44px!important; margin:0!important; color:var(--pm-text)!important; font-size:16px!important; font-weight:800!important; line-height:1.35!important; } body.petsmunity-app .pm-home-showcase-meta, body.petsmunity-app .pm-home-showcase-registry, body.petsmunity-app .pm-home-showcase-location{ overflow:hidden!important; margin-top:8px!important; color:var(--pm-muted)!important; font-size:12px!important; line-height:1.35!important; text-overflow:ellipsis!important; white-space:nowrap!important; } body.petsmunity-app .pm-home-pedigree-card .pm-home-showcase-meta{ margin-top:0!important; color:var(--pm-color-pedigree)!important; font-size:11px!important; font-weight:800!important; text-transform:uppercase!important; letter-spacing:.04em!important; } body.petsmunity-app .pm-home-pedigree-card h3{ margin-top:5px!important; } body.petsmunity-app .pm-home-showcase-registry{ color:var(--pm-text)!important; font-weight:700!important; } @media(max-width:1100px){ body.petsmunity-app .pm-home-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:640px){ body.petsmunity-app .pm-home-showcase-section{padding:26px 0!important} body.petsmunity-app .pm-home-showcase-wrap{padding:0!important} body.petsmunity-app .pm-home-showcase-head{align-items:flex-start!important;flex-direction:column!important;gap:10px!important} body.petsmunity-app .pm-home-showcase-grid{grid-template-columns:1fr!important} } /* Explore PetsMunity — Dubizzle-style hover mega menu with PetsMunity identity. */ body.petsmunity-app .pm-home-explore-section{ position:relative!important; z-index:24!important; padding:0!important; background:#fff!important; border-bottom:1px solid var(--pm-border)!important; } body.petsmunity-app .pm-home-explore-section.is-open{ z-index:1003!important; } body.petsmunity-app .pm-home-explore-wrap{ /* Use the exact same .pm-container width/alignment as Find a Pet. */ padding:0!important; } body.petsmunity-app .pm-home-explore-nav{ display:flex!important; align-items:stretch!important; width:100%!important; overflow-x:auto!important; border-top:1px solid var(--pm-border)!important; scrollbar-width:none!important; } body.petsmunity-app .pm-home-explore-nav::-webkit-scrollbar{display:none!important} body.petsmunity-app .pm-home-explore-tab{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; flex:1 0 auto!important; min-width:150px!important; min-height:56px!important; padding:0 18px!important; border:0!important; border-bottom:3px solid transparent!important; border-radius:0!important; background:transparent!important; color:var(--pm-primary)!important; font:inherit!important; font-size:13px!important; font-weight:800!important; line-height:1.2!important; white-space:nowrap!important; cursor:pointer!important; box-shadow:none!important; } body.petsmunity-app .pm-home-explore-tab:hover, body.petsmunity-app .pm-home-explore-tab:focus-visible, body.petsmunity-app .pm-home-explore-tab.is-active{ background:#fff!important; border-bottom-color:var(--pm-home-explore-active,var(--pm-secondary))!important; color:var(--pm-primary)!important; outline:none!important; } body.petsmunity-app .pm-home-explore-panel{ position:absolute!important; top:100%!important; left:var(--pm-home-explore-panel-left,0px)!important; z-index:1005!important; width:var(--pm-home-explore-panel-width,760px)!important; max-width:100%!important; max-height:min(500px,calc(100vh - 180px))!important; transform:none!important; overflow:hidden!important; border:1px solid var(--pm-border)!important; border-top:0!important; border-radius:0 0 10px 10px!important; background:#fff!important; box-shadow:0 18px 42px rgba(23,50,77,.18)!important; } body.petsmunity-app .pm-home-explore-panel[hidden]{display:none!important} body.petsmunity-app .pm-home-explore-panel-shell{ display:grid!important; grid-template-columns:260px minmax(0,1fr)!important; min-height:310px!important; max-height:inherit!important; } body.petsmunity-app .pm-home-explore-side{ padding:24px 22px!important; border-right:1px solid var(--pm-border)!important; background:#f7f9fb!important; } body.petsmunity-app .pm-home-explore-side h3{ margin:0 0 8px!important; color:var(--pm-primary)!important; font-size:19px!important; font-weight:800!important; } body.petsmunity-app .pm-home-explore-side p{ margin:0 0 18px!important; color:var(--pm-muted)!important; font-size:13px!important; line-height:1.5!important; } body.petsmunity-app .pm-home-explore-all{ display:inline-flex!important; align-items:center!important; color:var(--pm-home-explore-active,var(--pm-secondary))!important; font-size:13px!important; font-weight:800!important; text-decoration:none!important; } body.petsmunity-app .pm-home-explore-all:hover{ text-decoration:underline!important; text-underline-offset:3px!important; } body.petsmunity-app .pm-home-explore-main{ min-width:0!important; background:#fff!important; } body.petsmunity-app .pm-home-explore-main-head{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:18px!important; min-height:62px!important; padding:0 22px!important; border-bottom:1px solid var(--pm-border)!important; background:#fbfcfd!important; } body.petsmunity-app .pm-home-explore-main-head h3{ margin:0!important; color:var(--pm-primary)!important; font-size:18px!important; font-weight:800!important; } body.petsmunity-app .pm-home-explore-see-all{ color:var(--pm-home-explore-active,var(--pm-secondary))!important; font-size:12px!important; font-weight:800!important; text-decoration:none!important; } body.petsmunity-app .pm-home-explore-see-all:hover{ text-decoration:underline!important; text-underline-offset:3px!important; } body.petsmunity-app .pm-home-explore-menu-list{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:0!important; max-height:390px!important; overflow-y:auto!important; padding:12px 14px 16px!important; scrollbar-width:thin!important; } body.petsmunity-app .pm-home-explore-menu-list[data-columns="1"]{ grid-template-columns:1fr!important; } body.petsmunity-app .pm-home-explore-menu-item{ display:flex!important; align-items:center!important; min-width:0!important; min-height:42px!important; padding:9px 12px!important; border-radius:6px!important; color:var(--pm-text)!important; font-size:13px!important; font-weight:550!important; line-height:1.3!important; text-decoration:none!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } body.petsmunity-app .pm-home-explore-menu-item:hover{ background:color-mix(in srgb,var(--pm-home-explore-active,var(--pm-secondary)) 8%,white)!important; color:var(--pm-home-explore-active,var(--pm-secondary))!important; } body.petsmunity-app .pm-home-explore-loading, body.petsmunity-app .pm-home-explore-empty{ padding:24px!important; color:var(--pm-muted)!important; font-size:13px!important; } body.petsmunity-app .pm-home-explore-overlay{ position:fixed!important; left:0!important; right:0!important; bottom:0!important; z-index:1001!important; background:rgba(19,27,35,.58)!important; } body.petsmunity-app .pm-home-explore-overlay[hidden]{display:none!important} @media(max-width:1000px){ body.petsmunity-app .pm-home-explore-panel-shell{ grid-template-columns:220px minmax(0,1fr)!important; } } @media(max-width:760px){ body.petsmunity-app .pm-home-explore-section{padding:0!important} body.petsmunity-app .pm-home-explore-wrap{padding:0!important} body.petsmunity-app .pm-home-explore-tab{ flex:0 0 auto!important; min-width:132px!important; min-height:50px!important; padding:0 13px!important; font-size:12px!important; } body.petsmunity-app .pm-home-explore-panel{ width:calc(100% - 24px)!important; max-height:min(62vh,520px)!important; } body.petsmunity-app .pm-home-explore-panel-shell{ display:block!important; min-height:0!important; } body.petsmunity-app .pm-home-explore-side{ display:none!important; } body.petsmunity-app .pm-home-explore-main-head{ min-height:54px!important; padding:0 14px!important; } body.petsmunity-app .pm-home-explore-menu-list{ grid-template-columns:1fr!important; max-height:calc(62vh - 54px)!important; padding:8px!important; } } /* Microchip Registry: keep the lookup action visually separated from the input. */ body.petsmunity-app.pm-view-microchip-registry #pm-chip-lookup > .pm-btn, body.petsmunity-app.pm-view-microchip-registry #pm-chip-lookup > button[type="submit"], body.petsmunity-app.pm-view-microchip-registry #pm-chip-lookup .pm-form-actions:first-of-type{ margin-top:16px!important; } /* Deep-linked section views: every mega-menu destination has distinct content. */ body.petsmunity-app .pm-deep-page{ padding-top:34px!important; padding-bottom:44px!important; } body.petsmunity-app .pm-deep-header{ display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:24px!important; margin-bottom:18px!important; } body.petsmunity-app .pm-deep-header h1{ margin:0 0 6px!important; color:var(--pm-primary)!important; font-size:34px!important; line-height:1.12!important; } body.petsmunity-app .pm-deep-header p{ margin:0!important; max-width:720px!important; color:var(--pm-muted)!important; font-size:14px!important; line-height:1.5!important; } body.petsmunity-app .pm-deep-actions, body.petsmunity-app .pm-deep-subnav{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:9px!important; margin:0 0 22px!important; } body.petsmunity-app .pm-deep-subnav-link{ display:inline-flex!important; align-items:center!important; min-height:38px!important; padding:8px 13px!important; border:1px solid var(--pm-border)!important; border-radius:999px!important; background:#fff!important; color:var(--pm-primary)!important; font-size:13px!important; font-weight:750!important; text-decoration:none!important; } body.petsmunity-app .pm-deep-subnav-link:is(:hover,.is-active){ border-color:var(--pm-section-color,var(--pm-secondary))!important; background:color-mix(in srgb,var(--pm-section-color,var(--pm-secondary)) 10%,white)!important; color:var(--pm-primary)!important; } body.petsmunity-app .pm-deep-grid{ margin-top:4px!important; } body.petsmunity-app .pm-deep-record-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:16px!important; } body.petsmunity-app .pm-deep-record-card, body.petsmunity-app .pm-deep-post-card{ display:block!important; min-width:0!important; padding:18px!important; border:1px solid var(--pm-border)!important; border-radius:13px!important; background:#fff!important; color:var(--pm-text)!important; text-decoration:none!important; box-shadow:0 4px 14px rgba(23,50,77,.04)!important; } body.petsmunity-app .pm-deep-record-card:hover, body.petsmunity-app .pm-deep-post-card:hover{ border-color:var(--pm-section-color,var(--pm-secondary))!important; box-shadow:0 10px 24px rgba(23,50,77,.09)!important; transform:translateY(-1px)!important; } body.petsmunity-app .pm-deep-record-card h3, body.petsmunity-app .pm-deep-post-card h3{ margin:5px 0 10px!important; color:var(--pm-primary)!important; font-size:17px!important; line-height:1.3!important; } body.petsmunity-app .pm-deep-card-kicker{ color:var(--pm-section-color,var(--pm-secondary))!important; font-size:11px!important; font-weight:850!important; letter-spacing:.05em!important; text-transform:uppercase!important; } body.petsmunity-app .pm-deep-card-line, body.petsmunity-app .pm-deep-card-muted{ margin:5px 0 0!important; font-size:13px!important; line-height:1.45!important; } body.petsmunity-app .pm-deep-card-muted{ color:var(--pm-muted)!important; } body.petsmunity-app .pm-deep-parent-grid{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:9px!important; margin-top:12px!important; } body.petsmunity-app .pm-deep-parent{ padding:10px 11px!important; border:1px solid var(--pm-border)!important; border-radius:9px!important; background:#f8fafb!important; } body.petsmunity-app .pm-deep-parent span{ display:block!important; margin-bottom:3px!important; color:var(--pm-muted)!important; font-size:10px!important; font-weight:800!important; text-transform:uppercase!important; } body.petsmunity-app .pm-deep-parent strong{ color:var(--pm-primary)!important; font-size:12px!important; } body.petsmunity-app .pm-deep-chips{ display:flex!important; flex-wrap:wrap!important; gap:7px!important; margin-top:12px!important; } body.petsmunity-app .pm-deep-chip{ display:inline-flex!important; padding:6px 9px!important; border-radius:999px!important; background:#f2f6f8!important; color:var(--pm-primary)!important; font-size:11px!important; font-weight:750!important; } body.petsmunity-app .pm-deep-chip.is-verified{ background:#edf9f6!important; } body.petsmunity-app .pm-deep-post-list{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; } body.petsmunity-app .pm-deep-post-meta{ margin-top:12px!important; color:var(--pm-muted)!important; font-size:11px!important; font-weight:700!important; } body.petsmunity-app .pm-deep-post-detail, body.petsmunity-app .pm-deep-comments{ margin-top:14px!important; padding:20px!important; border:1px solid var(--pm-border)!important; border-radius:13px!important; background:#fff!important; } body.petsmunity-app .pm-deep-post-body{ margin-top:8px!important; color:var(--pm-text)!important; font-size:15px!important; line-height:1.65!important; } body.petsmunity-app .pm-deep-comments h3{ margin:0 0 12px!important; color:var(--pm-primary)!important; } body.petsmunity-app .pm-deep-comment{ padding:12px 0!important; border-top:1px solid var(--pm-border)!important; } body.petsmunity-app .pm-deep-comment:first-of-type{border-top:0!important} body.petsmunity-app .pm-deep-comment p{margin:5px 0 0!important;color:var(--pm-text)!important} body.petsmunity-app .pm-deep-empty{ grid-column:1/-1!important; padding:24px!important; border:1px dashed var(--pm-border)!important; border-radius:12px!important; background:#fafcfd!important; color:var(--pm-muted)!important; text-align:center!important; font-weight:650!important; } @media(max-width:900px){ body.petsmunity-app .pm-deep-record-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:650px){ body.petsmunity-app .pm-deep-page{padding-top:24px!important} body.petsmunity-app .pm-deep-header h1{font-size:28px!important} body.petsmunity-app .pm-deep-record-grid, body.petsmunity-app .pm-deep-post-list{grid-template-columns:1fr!important} body.petsmunity-app .pm-deep-parent-grid{grid-template-columns:1fr!important} }