/* Hundello Frontend Theme
   Uses original hundello.com assets/css/app.css + assets/css/fonts.css
   This file contains only the few missing/layout rules needed for the WordPress theme wrapper.
*/

:root {
  --hd-green-500: rgb(162 198 46);
  --hd-green-600: rgb(125 152 35);
  --hd-text-dark: rgb(31 41 55);
}

/* Page framing: match hundello.com (1150px centered, grey canvas outside) */
body{
  background: rgb(229 231 235); /* #E5E7EB */
}
.hd-shell{
  max-width: 1150px;
  margin: 0 auto;
  min-height: 100vh;
  background: rgb(243 244 246); /* #F3F4F6 */
  box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 18px 40px rgba(0,0,0,.08);
}

/* Safety: if Tailwind's .hidden is not present for any reason */
.hidden{display:none}

/* Header background + diagonal slice
   NOTE: We intentionally avoid overflow-x:hidden on the header itself.
   Safari/WebKit can treat overflow-x:hidden as overflow:hidden (clipping the burger dropdown).
   Instead we render the clipped background in a dedicated layer (.hd-header-bg). */
.hd-header {
  height: 80px;
  position: relative;
  overflow: visible;
  /* Ensure the burger dropdown overlays the sticky filter bar (mobile + desktop). */
  z-index: 200;
}
.hd-header-bg{
  position: absolute;
  inset: 0;
  background: var(--hd-green-600);
  overflow: hidden; /* only the background is clipped */
  z-index: 1;
}
.hd-header-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60px;
  width: 420px;
  height: 100%;
  background: var(--hd-green-500);
  transform: skewX(-20deg);
  transform-origin: left top;
}
.hd-header-inner{
  position: relative;
  z-index: 2;
  height: 100%;
}

/* Container: keep the original 1150px from app.css (.container), but add padding + flex */
.hd-container{
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Logo */
.hd-logo{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.hd-logo-img{
  height: 44px;
  width: auto;
}
.hd-logo-text{
  color: #fff;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
}

/* Homepage layout: left ad sidebar + content column (like hundello.com) */
.hd-home-wrap{
  padding: 18px 0 42px;
}
.hd-home-grid{
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.hd-sidebar{
  width: 300px;
  /* Sticky ad column on desktop (like hundello.com) */
  position: -webkit-sticky;
  position: sticky;
  top: 18px;
  align-self: start;
  height: max-content;
}
.hd-ad-slot{
  width: 300px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;
}

.hd-ad-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.hd-ad-slot--rect{height: 250px;}
.hd-ad-slot--skyscraper{
  height: 600px;
  margin-top: 0;
  /* Sticky is handled on the sidebar column for better browser support */
  position: relative;
}

/* Typography adjustments (closer to hundello.com)
   Note: "Kicker" lines are marked via a Gutenberg block style
   (class: .is-style-hd-kicker) so they stay fully editable.
*/
.hd-kicker,
.is-style-hd-kicker{
  color: var(--hd-green-500);
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
  margin: 0 0 2px;
  text-transform: none;
  letter-spacing: 0;
}

/* When a kicker is followed by a heading, keep them visually tighter
   (matches the original hundello.com spacing). */
.is-style-hd-kicker + h1,
.is-style-hd-kicker + h2,
.is-style-hd-kicker + h3,
.is-style-hd-kicker + h4{
  margin-top: .25rem;
}

/* Main H1 inside editable content (replaces the previously hard-coded homepage title) */
.hd-home-title,
.hd-content h1,
.hundello-prose h1{
  color: var(--hd-text-dark);
  font-weight: 800;
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem; /* 40px */
  letter-spacing: -0.02em;
  /* Match hundello.com spacing: same distance as H2 -> paragraph inside content */
  margin: 0 0 1.25rem;
}
.hd-home-intro{
  color: rgb(55 65 81); /* gray-700 */
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
}

/* Headings inside the main content column */
.hd-content h2,
.hd-content h3,
.hd-content h4{
  color: var(--hd-text-dark);
  font-weight: 800;
}

/* Headings inside the main content column */
.hd-content h2,
.hd-content h3,
.hd-content h4{
  color: var(--hd-text-dark);
  font-weight: 800;
}

@media (max-width: 980px){
  .hd-home-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hd-sidebar{width: auto; order: 2; position: static; top: auto;}
  .hd-ad-slot{width: 100%;}
  .hd-ad-slot--skyscraper{position: static; height: 320px;}
}

@media (max-width: 640px){
  .hd-home-title{font-size: 1.875rem; line-height: 2.25rem;}
  .hd-logo-img{height: 40px;}
  .hd-logo-text{font-size: 28px;}
}

/* Actions row */
.hd-header-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

/* Autocomplete wrapper must be positioned for app.css dropdown */
.autoComplete_wrapper{
  position: relative;
  z-index: 40;
}

/* app.css keeps the suggestion list "visible" (display:block) even when [hidden] or :empty.
   Ensure it cannot block clicks on the burger button/panel when it's not actually shown. */
.autoComplete_wrapper > ul[hidden],
.autoComplete_wrapper > ul:empty{
  pointer-events: none;
}
.autoComplete_wrapper > ul{
  pointer-events: auto;
}

/* Search input styling (matches screenshot behaviour: dark on idle, white on focus) */
.hd-search-input{
  width: 300px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: rgba(0,0,0,.18);
  color: #fff;
}
.hd-search-input::placeholder{
  color: rgba(255,255,255,.6);
}
.hd-search-input:focus{
  outline: none;
  background: #fff;
  color: var(--hd-text-dark);
}

/* Responsive header (match hundello.com behaviour):
   - Search stays visible on tablet widths
   - Search disappears on phones (so it doesn't shrink to an unusable size)
   - Burger dropdown becomes full device width on phones */
@media (max-width: 980px){
  .hd-search-input{width: 240px;}
}
@media (max-width: 820px){
  .hd-search-input{width: 210px;}
  .hd-header-actions{gap: 12px;}
}
@media (max-width: 760px){
  /* On phones: only show logo + burger in the header */
  /* Only hide the HEADER search on phones (the filterbar search must stay visible). */
  .hd-header-actions .autoComplete_wrapper{display:none;}
  .hd-header-actions{gap: 0;}

  /* Hide the desktop sidebar ad on phones (mobile ads will be handled later) */
  .hd-sidebar{display:none;}
}

/* Language text (no switcher) */
.hd-lang{
  color: #fff;
  font-weight: 600;
}

/* Burger button */
.hd-burger-btn{
  height: 40px;
  width: 40px;
  border: 0;
  border-radius: 6px;
  background: rgba(0,0,0,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 8000;
}
.hd-burger-btn:hover{
  background: var(--hd-green-500);
}

/* Dropdown panel (desktop) */
.hd-burger-panel{
  position: absolute;
  /* Visually match hundello.com: a small gap below the 80px header */
  top: 95px;
  right: 15px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  padding: 16px;
  min-width: 360px;
  max-width: 520px;
  z-index: 8001;
}

/* IMPORTANT: this must come after the base .hd-burger-panel rule, otherwise the
   desktop positioning would override the phone layout due to source order. */
@media (max-width: 760px){
  .hd-burger-panel{
    /* On phones the open menu should be full device width, but NOT fixed.
       It must scroll away with the page (like the original). */
    position: absolute;
    top: 80px;
    /* Stay within the viewport width on long menu items (no horizontal overflow). */
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    border-radius: 0 0 14px 14px;
    padding: 18px 16px 22px;
    max-height: none;
    overflow: visible;
    overflow-x: hidden;
    box-sizing: border-box;
    margin: 0;
    transform: none;
  }
}

/* Defensive: ensure hidden panels never render */
.hd-burger-panel[hidden]{
  display: none !important;
}

.hd-toc-title{
  padding: 6px 14px 8px;
  font-weight: 800;
  color: var(--hd-text-dark);
}

.hd-menu-list{margin:0;padding:0}
.hd-menu-list li{margin:0}
.hd-menu-list a{
  display:block;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--hd-text-dark);
}

/* Mobile: ensure long menu labels wrap and never push the panel wider than the viewport */
@media (max-width: 760px){
  .hd-menu-list a{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
.hd-menu-list a:hover{
  background: rgb(243 244 246);
}

/* Make sure WP custom logo output doesn't add default spacing */
.custom-logo-link{display:inline-flex;align-items:center}

/* Footer (match hundello.com: grey footer area with columns) */
.hd-footer{
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 44px 0 52px;
  background: rgb(243 244 246);
}
.hd-footer-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
/* Mobile: show the 4 link blocks as 2x2 (when space allows) */
@media (min-width: 360px){
  .hd-footer-grid{grid-template-columns: 1fr 1fr; gap: 22px;}
  .hd-footer-brand{grid-column: 1 / -1;}
}
@media (min-width: 640px){
  .hd-footer-grid{grid-template-columns: 1fr 1fr; gap: 26px;}
}
@media (min-width: 900px){
  .hd-footer-grid{grid-template-columns: 260px 1fr 1fr 1fr 1fr; gap: 32px;}
  .hd-footer-brand{grid-column: auto;}
  .hd-footer-col{padding-top: 9px;}
}

.hd-footer-brand a{display:flex;align-items:center;gap:12px;text-decoration:none}
.hd-footer-brand img{height:40px;width:auto}
.hd-footer-logo-img{margin-top:0}
.hd-footer-brand span{font-weight:900;font-size:22px;line-height:1;color:var(--hd-text-dark)}
.hd-footer-title{font-weight:800;font-size:14px;color:rgb(55 65 81);margin:0 0 10px}
.hd-footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hd-footer-links a{color:rgb(107 114 128);font-weight:600;font-size:14px;text-decoration:none}
.hd-footer-links a:hover{color:var(--hd-text-dark)}

/* Basic content typography (pages, articles, breed pages) */
.hd-content, .hundello-prose{color:rgb(55 65 81);font-size:16px;line-height:1.8}
.hd-content p, .hundello-prose p{margin:0 0 1rem}

/* Lists: Tailwind reset in app.css removes bullets globally, so restore them
   for the readable content area (like on hundello.com). */
.hd-content ul, .hundello-prose ul{list-style:disc;list-style-position:outside;padding-left:1.35rem;margin:0 0 1rem}
.hd-content ol, .hundello-prose ol{list-style:decimal;list-style-position:outside;padding-left:1.35rem;margin:0 0 1rem}
.hd-content li, .hundello-prose li{margin:0 0 .5rem;padding-left:.25rem}
.hd-content li::marker, .hundello-prose li::marker{color:rgb(156 163 175)}
.hd-content ul ul, .hundello-prose ul ul{list-style:circle;margin-top:.5rem}
.hd-content ol ol, .hundello-prose ol ol{list-style:lower-alpha;margin-top:.5rem}

.hd-content h2, .hundello-prose h2{margin:2rem 0 1.25rem;font-size:27px;font-weight:800;color:rgb(31 41 55);line-height:1.25}
.hd-content h3, .hundello-prose h3{margin:1.5rem 0 1rem;font-size:1.25rem;font-weight:800;color:rgb(31 41 55);line-height:1.25}

/* Tighten heading spacing when preceded by a kicker (H1/H2/H3/H4) */
.hd-home-content .is-style-hd-kicker + h1,
.hd-content .is-style-hd-kicker + h1,
.hd-content .is-style-hd-kicker + h2,
.hd-content .is-style-hd-kicker + h3,
.hd-content .is-style-hd-kicker + h4,
.hundello-prose .is-style-hd-kicker + h1,
.hundello-prose .is-style-hd-kicker + h2,
.hundello-prose .is-style-hd-kicker + h3,
.hundello-prose .is-style-hd-kicker + h4
{margin-top:.25rem;}

.hd-content a, .hundello-prose a{color:var(--hd-green-600);font-weight:700}
.hd-content a:hover, .hundello-prose a:hover{color:var(--hd-green-500)}

/* Blockquote styling (match hundello.com "Über hundello") */
.hd-content blockquote,
.hundello-prose blockquote,
.entry-content blockquote,
.wp-block-quote{
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
  /* extra space on top for the quote mark */
  padding: 66px 26px 26px;
  margin: 1.75rem 0;
  font-style: italic;
  color: rgb(75 85 99);
  line-height: 1.9;
}
.hd-content blockquote p,
.hundello-prose blockquote p,
.entry-content blockquote p,
.wp-block-quote p{margin:0 0 22px}
.hd-content blockquote p:last-child,
.hundello-prose blockquote p:last-child,
.entry-content blockquote p:last-child,
.wp-block-quote p:last-child{margin-bottom:0}
.hd-content blockquote > :last-child,
.hundello-prose blockquote > :last-child,
.entry-content blockquote > :last-child,
.wp-block-quote > :last-child{margin-bottom:0}

.hd-content blockquote::before,
.hundello-prose blockquote::before,
.entry-content blockquote::before,
.wp-block-quote::before{
  /* Use a single opening double-quote glyph ("“").
     Rendering two characters with negative letter-spacing can look like
     a broken/overlapping double quote in some browsers/fonts. */
  content: "\201C";
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: rgb(209 213 219);
  opacity: .85;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}

/* Some WP/editor styles (or plugins) add an additional closing quote mark via ::after.
   Disable it so we match the original hundello.com design and avoid broken/duplicated quotes. */
.hd-content blockquote::after,
.hundello-prose blockquote::after,
.entry-content blockquote::after,
.wp-block-quote::after{
  content: none !important;
  display: none !important;
}

/* Extra hardening: some plugins/themes render quote marks on inner paragraphs.
   Disable those too to avoid any doubled/overlapping quotation marks. */
.hd-content blockquote p::before,
.hd-content blockquote p::after,
.hundello-prose blockquote p::before,
.hundello-prose blockquote p::after,
.entry-content blockquote p::before,
.entry-content blockquote p::after,
.wp-block-quote p::before,
.wp-block-quote p::after{
  content: none !important;
}


/* Signature inside blockquotes */
.hd-content blockquote cite,
.hd-content blockquote .wp-block-quote__citation,
.hundello-prose blockquote cite,
.hundello-prose blockquote .wp-block-quote__citation,
.entry-content blockquote cite,
.entry-content blockquote .wp-block-quote__citation,
.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation{
  display:block;
  text-align:right;
  margin-top: 8px;
  color: var(--hd-accent);
  font-style: italic;
  font-weight: 700;
}

/* Article / breed wrappers */
.hundello-article, .hundello-breed{max-width:1150px;margin:0 auto;padding:40px 16px}
.hundello-article-header{margin-bottom:22px}
.hundello-h1{font-size:2rem;font-weight:800;color:rgb(31 41 55);line-height:1.1}
@media (min-width:768px){.hundello-h1{font-size:2.5rem}}
.hundello-h2{font-size:22px;font-weight:800;color:rgb(31 41 55);margin:0 0 12px}

.hundello-meta-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:rgb(107 114 128);font-weight:600;margin-top:12px}
.hundello-dot{color:rgb(209 213 219)}
.hundello-featured img{width:100%;height:auto;border-radius:18px;margin-top:18px}

/* News lead (excerpt) below image */
.hd-news-lead{margin:14px 0 0;font-weight:800;color:rgb(31 41 55);font-size:16px;line-height:1.55}

/* Card */
.hundello-card{background:#fff;border-radius:18px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);padding:20px;margin-top:24px}
@media (min-width:768px){.hundello-card{padding:28px}}

/* Breed hero */
.hundello-hero{background:#fff;border-radius:22px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);overflow:hidden;display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:900px){.hundello-hero{grid-template-columns:1.2fr 1fr}}
.hundello-hero-text{padding:22px}
@media (min-width:768px){.hundello-hero-text{padding:28px}}
.hundello-lead{margin-top:12px;color:rgb(75 85 99);font-size:1.05rem;line-height:1.7}
.hundello-hero-actions{margin-top:18px}
.hundello-hero-img{min-height:240px;background-size:cover;background-position:center}

.hundello-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--hd-green-500);color:#fff;padding:10px 14px;border-radius:12px;font-weight:800}
.hundello-btn:hover{background:var(--hd-green-600)}

.hundello-btn--ghost{background:#fff;color:rgb(31 41 55);box-shadow:inset 0 0 0 1px rgb(209 213 219)}
.hundello-btn--ghost:hover{background:rgb(249 250 251);color:rgb(17 24 39)}

/* Breed detail page – gallery first layout */
.hundello-breed-single{padding-top:30px}
.hundello-breed-showcase{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media (min-width:1000px){
  .hundello-breed-showcase{grid-template-columns:minmax(0,1.6fr) 340px}
  .hundello-breed-summary{position:sticky;top:110px}
}

.hundello-breed-gallery-card{margin-top:0;padding:18px}
@media (min-width:768px){.hundello-breed-gallery-card{padding:22px}}
.hundello-breed-gallery-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.hundello-breed-gallery-copy{max-width:720px}
.hundello-breed-gallery-kicker{display:inline-flex;align-items:center;border-radius:999px;background:rgb(249 250 251);color:var(--hd-green-600);padding:6px 10px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.hundello-breed-gallery-copy .hundello-lead{margin-bottom:0}
.hundello-breed-gallery-count{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgb(243 244 246);color:rgb(31 41 55);font-weight:800;padding:10px 14px;white-space:nowrap}

.hundello-breed-gallery{display:grid;grid-template-columns:1fr;gap:14px}
.hundello-breed-gallery-stagewrap{position:relative;border-radius:22px;overflow:hidden;background:rgb(243 244 246);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.hundello-breed-gallery-stage{aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(243,244,246,.95));cursor:zoom-in;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior-x:contain;-webkit-user-select:none;user-select:none}
@media (min-width:900px){.hundello-breed-gallery-stage{aspect-ratio:16 / 10}}
.hundello-breed-gallery-main{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none;pointer-events:none;touch-action:none}
.hundello-breed-gallery-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:#fff;border-top:1px solid rgba(0,0,0,.06)}
.hundello-breed-gallery-caption{font-size:14px;line-height:1.45;color:rgb(75 85 99);min-height:20px}
.hundello-breed-gallery-position{font-size:13px;font-weight:800;color:rgb(31 41 55);white-space:nowrap}
.hundello-breed-gallery-nav,
.hundello-breed-gallery-expand{position:absolute;z-index:3;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);background:rgba(17,24,39,.72);color:#fff;cursor:pointer}
.hundello-breed-gallery-nav{top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:32px;line-height:1}
.hundello-breed-gallery-nav--prev{left:14px}
.hundello-breed-gallery-nav--next{right:14px}
.hundello-breed-gallery-expand{top:14px;right:14px;padding:10px 14px;font-size:13px;font-weight:800}
.hundello-breed-gallery-nav:hover,
.hundello-breed-gallery-expand:hover{background:rgba(17,24,39,.9)}

.hundello-breed-gallery-thumbs{display:grid;grid-template-columns:repeat(auto-fit, minmax(82px, 1fr));gap:10px}
@media (max-width:639px){
  .hundello-breed-gallery-thumbs{display:flex;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
}
.hundello-breed-gallery-thumb{padding:0;border:2px solid transparent;border-radius:16px;overflow:hidden;background:#fff;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08);flex:0 0 86px}
.hundello-breed-gallery-thumb img{display:block;width:100%;height:82px;object-fit:cover}
.hundello-breed-gallery-thumb:hover{transform:translateY(-1px)}
.hundello-breed-gallery-thumb.is-active{border-color:var(--hd-green-500);box-shadow:0 0 0 3px rgba(169,201,71,.18)}

.hundello-breed-gallery-empty{display:flex;align-items:center;justify-content:center;min-height:320px;border-radius:22px;background:rgb(249 250 251);color:rgb(75 85 99);font-weight:700;text-align:center;padding:30px}

.hundello-breed-summary{margin-top:0}
.hundello-breed-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:399px){.hundello-breed-summary-grid{grid-template-columns:1fr}}
.hundello-breed-summary-item{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:16px;background:rgb(249 250 251)}
.hundello-breed-summary-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:rgb(107 114 128)}
.hundello-breed-summary-value{font-size:15px;font-weight:800;line-height:1.35;color:rgb(31 41 55)}
.hundello-breed-summary-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.hundello-breed-lightbox[hidden]{display:none !important}
.hundello-breed-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(17,24,39,.96);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:20px}
.hundello-breed-lightbox-inner{display:flex;flex-direction:column;gap:14px;min-width:0}
.hundello-breed-lightbox-img{display:block;width:100%;max-height:78vh;object-fit:contain}
.hundello-breed-lightbox-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#fff}
.hundello-breed-lightbox-caption{font-size:14px;line-height:1.45;color:rgba(255,255,255,.8)}
.hundello-breed-lightbox-position{font-size:13px;font-weight:800;white-space:nowrap}
.hundello-breed-lightbox-close,
.hundello-breed-lightbox-nav{border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;backdrop-filter:blur(10px)}
.hundello-breed-lightbox-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:999px;font-size:34px;line-height:1}
.hundello-breed-lightbox-nav{width:50px;height:50px;border-radius:999px;font-size:36px;line-height:1}
.hundello-breed-lightbox-close:hover,
.hundello-breed-lightbox-nav:hover{background:rgba(255,255,255,.22)}
body.hd-gallery-open{overflow:hidden}

@media (max-width:767px){
  .hundello-breed-single{padding-top:22px}
  .hundello-breed-gallery-card{padding:14px}
  .hundello-breed-gallery-head{margin-bottom:14px}
  .hundello-breed-gallery-count{padding:8px 12px;font-size:13px}
  .hundello-breed-gallery-nav{width:38px;height:38px;font-size:28px}
  .hundello-breed-gallery-nav--prev{left:10px}
  .hundello-breed-gallery-nav--next{right:10px}
  .hundello-breed-gallery-expand{top:10px;right:10px;padding:8px 12px;font-size:12px}
  .hundello-breed-gallery-foot{padding:12px 14px}
  .hundello-breed-summary-actions{flex-direction:column}
  .hundello-breed-summary-actions .hundello-btn{width:100%}
  .hundello-breed-lightbox{grid-template-columns:1fr;padding:12px}
  .hundello-breed-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
  .hundello-breed-lightbox-nav--prev{left:10px}
  .hundello-breed-lightbox-nav--next{right:10px}
  .hundello-breed-lightbox-inner{padding-top:46px}
  .hundello-breed-lightbox-meta{flex-direction:column;align-items:flex-start}
}

/* Meta table */
.hundello-table{width:100%;border-collapse:separate;border-spacing:0 10px}
.hundello-table th{width:42%;text-align:left;color:rgb(107 114 128);font-weight:700;padding:8px 12px;background:rgb(249 250 251);border-radius:12px 0 0 12px}
.hundello-table td{color:rgb(31 41 55);font-weight:700;padding:8px 12px;background:rgb(249 250 251);border-radius:0 12px 12px 0}
@media (min-width:768px){.hundello-table th{width:34%}}

/* Post nav */
.hundello-post-nav{margin-top:34px;border-top:1px solid rgb(229 231 235);padding-top:18px}
.hundello-post-nav .nav-subtitle{display:block;color:rgb(107 114 128);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.hundello-post-nav .nav-title{display:block;font-weight:800;color:rgb(31 41 55);margin-top:4px}

/* Footer (match hundello.com: grey footer area with columns) */
.hd-footer{
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 44px 0 52px;
  background: rgb(243 244 246);
}
.hd-footer-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
/* Mobile: show the 4 link blocks as 2x2 (when space allows) */
@media (min-width: 360px){
  .hd-footer-grid{grid-template-columns: 1fr 1fr; gap: 22px;}
  .hd-footer-brand{grid-column: 1 / -1;}
}
@media (min-width: 640px){
  .hd-footer-grid{grid-template-columns: 1fr 1fr; gap: 26px;}
}
@media (min-width: 900px){
  .hd-footer-grid{grid-template-columns: 220px 1fr 1fr 1fr 1fr; gap: 32px;}
  .hd-footer-brand{grid-column: auto;}
  .hd-footer-col{padding-top: 9px;}
}

.hd-footer-logo{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.hd-footer-logo-img{height: 40px;width:auto;}
.hd-footer-logo-text{
  color: var(--hd-text-dark);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
}

.hd-footer-title{
  color: rgb(55 65 81);
  font-weight: 800;
  font-size: 14px;
  line-height: 18px;
  margin: 0 0 10px;
}

.hd-footer-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hd-footer-links a{
  color: rgb(107 114 128);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.hd-footer-links a:hover{color: var(--hd-text-dark);}


/* Hunderassen A–Z (Footer-Link Sitemap) */
.hd-az-empty{
  border:1px dashed rgba(0,0,0,.18);
  border-radius:16px;
  padding:18px;
  background:rgba(0,0,0,.02);
  color:rgb(55 65 81);
  font-weight:600;
}
.hd-az-groups{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:18px;
}
.hd-az-group{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:16px 16px 14px;
}
.hd-az-letter{
  margin:0 0 10px;
  font-weight:900;
  font-size:18px;
  color:rgb(17 24 39);
}
.hd-az-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:8px 26px;
}
@media (min-width: 768px){
  .hd-az-list{grid-template-columns:1fr 1fr;}
}
.hd-az-list a{
  text-decoration:none;
  color:rgb(55 65 81);
  font-weight:700;
}
.hd-az-list a:hover{color:#A9C947}

/* Nachrichten Listing (/nachrichten/ + Kategorie) */
.hd-news-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:18px;
}

.hd-news-desc{
  margin-top: 10px;
  color: rgb(75 85 99);
  font-size: 16px;
  line-height: 1.7;
}
.hd-news-desc > :last-child{ margin-bottom: 0; }

.hd-news-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  /* Match the rounding of the breed cards on the start page */
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.hd-news-link{
  display:grid;
  grid-template-columns: 140px 1fr;
  align-items:stretch;
  text-decoration:none;
  color:inherit;
}

@media (min-width: 640px){
  .hd-news-link{grid-template-columns: 220px 1fr;}
}

@media (max-width: 520px){
  .hd-news-link{grid-template-columns: 1fr;}
}

.hd-news-media{
  background: rgb(229 231 235);
  position:relative;
  overflow:hidden;
}

@media (max-width: 520px){
  .hd-news-media{aspect-ratio: 16 / 9;}
}

.hd-news-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hd-news-img--empty{
  width:100%;
  height:100%;
  background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}

.hd-news-body{
  padding: 14px 16px 16px;
}

.hd-news-title{
  margin:0;
  font-weight:900;
  font-size: 18px;
  line-height: 1.25;
  color: rgb(17 24 39);
}

.hd-news-excerpt{
  margin: 8px 0 0;
  color: rgb(75 85 99);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
}

.hd-news-card:hover .hd-news-title{color:#A9C947}

.hd-news-pagination{margin-top: 18px;}

/* Pagination styling (match Hundello UI) */
.hd-news-pagination .screen-reader-text{display:none;}

.hd-news-pagination ul.page-numbers{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.hd-news-pagination ul.page-numbers > li{margin:0; padding:0;}

.hd-news-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  min-width:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color: rgb(55 65 81);
  font-weight:800;
  text-decoration:none;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

.hd-news-pagination a.page-numbers:hover{
  background: rgba(169,201,71,.16);
  border-color: rgba(169,201,71,.65);
  color: rgb(17 24 39);
}

.hd-news-pagination .page-numbers.current{
  background: rgba(169,201,71,.18);
  border-color: rgba(169,201,71,.80);
  color: rgb(17 24 39);
}

.hd-news-pagination .page-numbers.dots{
  box-shadow:none;
  border-color: transparent;
  background: transparent;
  padding:0 6px;
  min-width:auto;
}

@media (max-width: 520px){
  .hd-news-pagination .page-numbers{
    height:38px;
    min-width:38px;
    padding:0 12px;
  }
}

/* Ensure footer column headings stay neutral (not accent green) */
.hd-footer .hd-footer-title{color: rgb(55 65 81) !important;}


/* Presse-Kacheln (Screenshot + Datum + Quelle + Headline) */
.hd-press-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 26px 0 0;
}
@media (min-width: 900px){
  .hd-press-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

.hd-press-card{
  display:block;
  text-decoration:none;
  color: inherit;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  /* Smaller radius to match the rest of the UI */
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.hd-press-card:focus-visible{
  outline: 3px solid rgba(162,198,46,.55);
  outline-offset: 3px;
}

.hd-press-media{
  position: relative;
  width: 100%;
  /* Presse-Screenshots werden als 16:9 hochgeladen.
     Damit im Frontend nichts abgeschnitten wird, nutzen wir ebenfalls 16:9. */
  aspect-ratio: 16 / 9;
  background: rgb(229 231 235);
  overflow:hidden;
}

.hd-press-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 55%, rgba(0,0,0,.14) 100%);
  pointer-events:none;
}

.hd-press-img{
  width:100%;
  height:100%;
  display:block;
  /* 16:9 passt 1:1 in den 16:9-Viewport. Falls mal ein anderes Verhältnis
     hochgeladen wird, schneiden wir lieber nichts ab. */
  object-fit: contain;
  transform: none;
  transition: transform .18s ease;
}

.hd-press-img--placeholder{
  width:100%;
  height:100%;
  background: linear-gradient(135deg, rgba(229,231,235,1), rgba(243,244,246,1));
}

.hd-press-meta{
  padding: 16px 18px 18px;
}

@media (max-width: 640px){
  .hd-press-meta{padding: 14px 16px 16px;}
}

.hd-press-date{
  font-size: 13px;
  font-weight: 700;
  color: rgb(107 114 128);
  margin: 0 0 4px;
}

.hd-press-source{
  font-size: 13px;
  font-weight: 900;
  color: var(--hd-green-600);
  margin: 0 0 7px;
}

.hd-press-title{
  font-size: 16px;
  font-weight: 900;
  color: rgb(31 41 55);
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 640px){
  .hd-press-title{font-size: 15px;}
}

.hd-press-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}

.hd-press-card:hover .hd-press-img{transform:none;}

/* =============================
   Hundello Homepage Breed Module
   ============================= */

.hd-breeds-anchor{display:block; height:0;}

.hd-breed-module{margin: 24px 0 36px;}

.hd-breed-module.is-loading{opacity: 0.7; pointer-events: none;}

/* Filters (layout like hundello.com) */
/* Bottom space reduced: the sticky bar should not waste vertical space */
.hd-breed-filters{margin: 0 0 10px;}

/* v1.0.94: Sticky filter bar like hundello.com (no shadow, no bleed of card shadows)
   Desktop: only extend ~15px within the content column (do NOT reach into the ad sidebar)
   Mobile: background reaches edge-to-edge via negative margins on the bar itself.
   Also cover the small top gap so it stays grey. */
:root{ --hd-sticky-gap: 10px; --hd-sticky-extend: 15px; }

.hd-breed-filters{
  position: -webkit-sticky;
  position: sticky;
  top: var(--hd-sticky-gap);
  z-index: 60;
  background: rgb(243 244 246); /* matches page bg */
}

body.admin-bar .hd-breed-filters{ top: calc(32px + var(--hd-sticky-gap)); }
@media (max-width: 782px){
  body.admin-bar .hd-breed-filters{ top: calc(46px + var(--hd-sticky-gap)); }
}

.hd-breed-filters.is-sticky{ box-shadow: none; }

/* When sticky: extend an opaque background slightly beyond the bar
   and slightly below it so breed-card shadows cannot "shine through".
   Also extend upward to cover the top gap (keeps it grey). */
.hd-breed-filters.is-sticky::before{
  content: "";
  position: absolute;
  top: calc(-1 * var(--hd-sticky-gap));
  /* Match the top gap: only extend down as much as the gap (prevents a too-tall sticky area) */
  bottom: calc(-1 * var(--hd-sticky-gap));
  left: calc(-1 * var(--hd-sticky-extend));
  right: calc(-1 * var(--hd-sticky-extend));
  background: rgb(243 244 246);
  pointer-events: none;
  z-index: 0;
}

.hd-breed-filters.is-sticky > *{ position: relative; z-index: 1; }

/* Mobile: make the sticky filter background reach the viewport edges */
@media (max-width: 760px){
  .hd-breed-filters{
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* On mobile, the bar already spans edge-to-edge; keep the sticky background aligned
     to avoid horizontal overflow. */
  .hd-breed-filters.is-sticky::before{ left: 0; right: 0; }
}

.hd-breed-filters__row{display:flex; align-items:center; gap: 14px;}
.hd-breed-filters__row--main{margin: 0 0 10px;}
.hd-breed-filters__row--bottom{
  margin-top: 12px;
  /* Keep this row compact; the sticky bar should not have an oversized bottom area */
  padding-bottom: 0;
  border-bottom: 0 !important;
  justify-content: space-between;
}

/* Autocomplete dropdown must overlay the bottom action row ("Mehr Filter") */
.hd-breed-filters__row--main{position: relative; z-index: 3;}
.hd-breed-filters__row--bottom{position: relative; z-index: 2;}
/* When sticky, the bar applies z-index:1 to direct children; override so dropdown can overlay */
.hd-breed-filters.is-sticky .hd-breed-filters__row--main{z-index: 3;}
.hd-breed-filters.is-sticky .hd-breed-filters__row--bottom{z-index: 2;}


@media (max-width: 760px){
  .hd-breed-filters__row{flex-wrap:wrap;}
}

.hd-breed-input,
.hd-breed-select{
  height: 40px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(31 41 55);
}

.hd-breed-input{flex: 1 1 auto; min-width: 260px;}
.hd-breed-select{flex: 0 0 210px; min-width: 180px;}

@media (max-width: 760px){
  .hd-breed-input{min-width: 100%;}
  .hd-breed-select{flex: 1 1 45%; min-width: 45%;}

  /* iOS Safari: prevent viewport zoom on focus by keeping inputs >= 16px */
  .hd-breed-input,
  .hd-breed-select{
    font-size: 16px;
  }
}

.hd-breed-filters__more{margin: 0 0 8px;}

.hd-breed-swatches{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 0 8px;
  height: 40px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  border-radius: 6px;
}

.hd-swatch{
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.22);
  cursor:pointer;
}

.hd-swatch.is-active{outline: 2px solid #A9C947; outline-offset: 1px;}

.hd-breed-traits-panel{
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Traits/attributes: 4 per row (desktop), 2 per row (mobile) */
.hd-breed-attr-toggle{
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  border-radius: 6px;  height: 40px;  padding: 0 12px;
}
.hd-breed-attr-toggle{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 13px;
  cursor:pointer;
}

.hd-breed-attr-toggle.is-active{
  background: rgba(169,201,71,.18);
  border-color: rgba(169,201,71,.65);
  color: rgb(50 61 14);
}

/* Mouseover highlight for attribute buttons */
@media (hover:hover){
  .hd-breed-attr-toggle:hover{
    background: rgba(169,201,71,.12);
    border-color: rgba(169,201,71,.45);
  }
  .hd-breed-attr-toggle.is-active:hover{
    background: rgba(169,201,71,.22);
    border-color: rgba(169,201,71,.75);
  }
}

.hd-breed-more-toggle{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border: 0;
  background: #A9C947;
  color: #fff;
  border-radius: 6px;
  height: 40px;
  padding: 0 16px;
  font-weight: 800;
  font-size: 14px;
  cursor:pointer;
}

.hd-breed-more-toggle__icon{
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(255,255,255,.95);
  transform: translateY(1px);
}

.hd-breed-more-toggle[aria-expanded="true"] .hd-breed-more-toggle__icon{
  transform: rotate(180deg) translateY(-1px);
}

.hd-breed-module__stats{font-weight: 600; color: rgb(31 41 55); font-size: 16px;}
.hd-breed-count{color: var(--hd-green-500); font-weight: 800; font-size: 20px; margin-right: 6px;}

/* List layout (single column like hundello.com) */
.hd-breed-grid{display:flex; flex-direction:column; gap: 18px;}

@media (max-width: 760px){
  .hd-breed-grid{gap: 14px;}
}

/* Breed card (layout like hundello.com) */
.breedbox{
  background:#fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  transition: box-shadow .18s ease;
}

@media (hover:hover){
  .breedbox:hover{box-shadow: 0 10px 26px rgba(0,0,0,.14);}
}

.breedbox__link{display:block; color:inherit; text-decoration:none;}

.breedbox__inner{display:flex; align-items:stretch;}

.breedbox__media{
  position:relative;
  flex: 0 0 340px;
  max-width: 340px;
  background: rgba(0,0,0,.04);
  overflow:hidden;
}

.breedbox__media img{
  width:100%;
  height:100%;
  min-height: 220px;
  object-fit:cover;
  display:block;
}

.breedbox__img--placeholder{
  width:100%;
  min-height: 220px;
  background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
  position:relative;
}

.breedbox__img--placeholder:after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-top: 70px solid rgba(0,0,0,.85);
  border-left: 70px solid transparent;
}

.breedbox__gallery-badge{
  position:absolute;
  right: 8px;
  bottom: 8px;
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(0,0,0,.35);
  color:#fff;
  font-weight: 700;
  font-size: 12px;
}

.breedbox__content{flex: 1 1 auto; padding: 12px 16px 14px;}

.breedbox__title{
  margin: 0 0 12px !important;
  font-size: 27px !important;
  font-weight: 700;
  line-height: 1.08;
  color: rgb(31 41 55);
}

.breedbox__columns{display:grid; grid-template-columns: 1fr 1fr; gap: 18px;}

.breedbox__col{display:flex; flex-direction:column; gap: 6px;}
.breedbox__row{display:grid; grid-template-columns: 120px 1fr; column-gap: 10px; padding: 2px 0;}


.breedbox__kv{display:grid; grid-template-columns: 120px 1fr; column-gap: 10px; padding: 2px 0;}
.breedbox__label{font-weight: 700; color: rgb(31 41 55);}
.breedbox__value{font-weight: 500; color: rgb(55 65 81); text-align:left; white-space:nowrap;}

@media (max-width: 760px){
  .breedbox__inner{flex-direction:column;}
  .breedbox__media{flex: 0 0 auto; max-width: none;}
  .breedbox__title{font-size: 16px; margin: 0 0 10px; font-weight: 600; line-height: 1.12;}
  .breedbox__columns{grid-template-columns: 1fr; gap: 6px;}
}

.hd-breed-module__footer{margin: 18px 0 0; display:flex; justify-content:center;}

/* v1.0.60 – Desktop/Tablet: list single column + smaller square images + hover */
@media (min-width: 761px){
  /* Force one card per row, even if other CSS turns this into a grid */
  .hd-breed-grid{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;
  }
  .hd-breed-grid > .breedbox{
    width:100% !important;
    max-width:100% !important;
  }

  /* Square media on the left */

  /* Title area: reserve 2 lines so details never shift when names wrap */
  .breedbox__content{display:flex; flex-direction:column;}
  .breedbox__title{
    font-size: 27px !important;
    line-height: 1.12 !important;
    margin: 0 0 12px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }


  .breedbox__inner{align-items:flex-start !important;}
  .breedbox__media{
    --hd-breed-img: 250px;
    flex: 0 0 var(--hd-breed-img) !important;
    width: var(--hd-breed-img) !important;
    max-width: var(--hd-breed-img) !important;
    height: var(--hd-breed-img) !important;
  }
  .breedbox__media img,
  .breedbox__img--placeholder{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    object-fit:cover !important;
    display:block !important;
  }
}


/* Extinct / historical breeds: black mourning ribbon on image corner */
.breedbox--extinct .breedbox__media{ overflow:hidden; }
.breedbox__mourning-ribbon{
  position:absolute;
  top: 14px;
  right: -46px;
  width: 150px;
  height: 16px;
  background: rgba(0,0,0,.72);
  transform: rotate(45deg);
  z-index: 5;
  pointer-events:none;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* ===========================
   v1.0.67 fixes
   - Mobile: 2 columns, only title under image
   - Desktop/Tablet: square image 250x250
   - Filters: robust grid layout + visible color swatches
   - Mourning ribbon: wider + opaque
   =========================== */

/* Desktop/Tablet: square image 250x250 */
@media (min-width: 761px){
  .breedbox__media{
    flex: 0 0 250px !important;
    max-width: 250px !important;
    width: 250px !important;
    height: 250px !important;
  }
  .breedbox__media img,
  .breedbox__img--placeholder{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  /* Title sizing closer to original */
  .breedbox__title{
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 0 0 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Mobile: 2 dogs per row, compact card, show only title under image */
@media (max-width: 760px){
  .hd-breed-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .breedbox{
    box-shadow: 0 5px 14px rgba(0,0,0,.10);
  }

  .breedbox__inner{
    flex-direction: column !important;
  }

  .breedbox__media{
    flex: 0 0 auto !important;
    max-width: none !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  .breedbox__media img,
  .breedbox__img--placeholder{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  .breedbox__content{
    padding: 10px 12px 12px !important;
  }

  /* Only show the name */
  .breedbox__columns{
    display: none !important;
  }

  .breedbox__title{
    /* Match original: slightly smaller on mobile; never break words */
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.18 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  /* Empty state should span the full grid width on mobile */
  .hd-breed-grid .breedbox--empty{
    grid-column: 1 / -1 !important;
  }

  /* Traits/attributes grid: 2 per row on mobile */
  .hd-breed-traits-panel{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hover: title turns hellgrün */
@media (hover:hover){
  .breedbox:hover .breedbox__title{
    color: #A9C947 !important;
  }
}


/* v1.0.70 safeguard: keep breed title height stable on Desktop/Tablet */
@media (min-width: 761px){
  .breedbox__title{
    font-size: 22px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Filters: use grid instead of inflexible flex so expanded panel doesn't break */
.hd-breed-filters__row{
  display: grid !important;
  gap: 14px !important;
  align-items: center !important;
}

/* Main row: search + 2 selects */
.hd-breed-filters__row--main{
  /* Desktop spec with exact column widths matching the 4-col grid below:
     Suche spans 2 cols, Erfahrung 1 col, Größe 1 col (all columns equal)
     This avoids the tiny width mismatch caused by differing gap counts.
  */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 0 10px !important;
}

/* Place items explicitly so "Erfahrung" is pixel-perfect the same width as other 25% fields */
.hd-breed-filters__row--main .hd-breed-input{ grid-column: 1 / span 2 !important; }
.hd-breed-filters__row--main [data-hd-select="hundello_experience"]{ grid-column: 3 !important; }
.hd-breed-filters__row--main [data-hd-select="hundello_size"]{ grid-column: 4 !important; }

/* Expanded filter grid (desktop spec)
   Row 1: Energielevel | Jagdtrieb | Intelligenz | Art (25% each)
   Row 2: Zeit alleine | Fell | Farben/Farbfelder (50% via span 2 cols)
*/
.hd-breed-filters__grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 0 12px !important;
}

/* Extra select rows (auto-added from plugin config) */
.hd-breed-filters__more .hd-breed-filters__row--extra{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: 12px !important;
}

@media (min-width: 1101px){
  /* Swatches are now inside the combined color field wrapper. */
}

/* Combined color field: "Farben" select + swatches in ONE field */
.hd-breed-colorfield{
  /* Desktop spec: Farben/Farbfelder = 50% (span 2 of 4 columns) */
  grid-column: 3 / span 2 !important;
  /* IMPORTANT: use 2-col grid with the SAME gap as the filter grid.
     This makes the select arrow + swatches align perfectly with the
     vertical "fluchtpunkte" of the fields above (desktop + mobile). */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.hd-breed-colorfield .hd-breed-select{
  width: 100% !important;
  max-width: none !important;
}
.hd-breed-colorfield .hd-breed-swatches{
  width: 100% !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Make inputs/selects/buttons fill their grid cell */
.hd-breed-input,
.hd-breed-select{
  width: 100% !important;
  min-width: 0 !important;
}

.hd-breed-select--button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Keep the desktop proportions on tablet. Only mobile changes layout. */

/* Mobile: maximum 2 fields next to each other */
@media (max-width: 760px){
  /* Main row mobile spec:
     Suche = full row, then Erfahrung/Größe = 50/50.
     IMPORTANT: override desktop grid-column placements (3/4), otherwise the grid creates implicit columns on mobile.
  */
  .hd-breed-filters__row--main{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "search search"
      "exp size";
  }
  .hd-breed-filters__row--main .hd-breed-input{ grid-area: search !important; }
  .hd-breed-filters__row--main [data-hd-select="hundello_experience"]{ grid-area: exp !important; }
  .hd-breed-filters__row--main [data-hd-select="hundello_size"]{ grid-area: size !important; }

  /* Mobile spec: never more than 2 fields in a row */
  .hd-breed-filters__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hd-breed-filters__more .hd-breed-filters__row--extra{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Color field should be full-width on mobile */
  .hd-breed-colorfield{
    grid-column: 1 / -1 !important;
    /* Keep the desktop behaviour: pattern left, swatches right – in ONE row */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    min-height: 40px !important;
  }
  .hd-breed-colorfield .hd-breed-select{
    /* On mobile the arrow should align like other 50% fields above */
    height: 38px !important;
    border: 0 !important;
    padding-bottom: 0 !important;
  }

  .hd-breed-colorfield .hd-breed-swatches{
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
  }
  /* Hide fields not in the mobile spec */
  .hd-breed-filters__grid [data-hd-select="hundello_type"],
  .hd-breed-filters__grid [data-hd-select="hundello_coat"]{
    display: none !important;
  }
}

/* Colors: render pattern + swatches as ONE combined white field */
.hd-breed-colorfield{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 6px !important;
  padding-left: 12px !important;
  /* Right padding should match other fields (same as select arrow inset) */
  /* Reduce right inset so the swatches align with the select-arrow “fluchtpunkt” */
  padding-right: 8px !important;
  min-height: 40px !important;
}

/* Remove inner borders so it reads as a single field */
.hd-breed-colorfield .hd-breed-select{
  border: 0 !important;
  /* Do NOT use the background shorthand here – it would remove the
     form-select arrow background-image from app.css. */
  background-color: transparent !important;
  padding-left: 0 !important;
  height: 38px !important;
}

.hd-breed-colorfield .hd-breed-swatches{
  border: 0 !important;
  background-color: transparent !important;
  /* Align right edge with other select arrows (no extra inset beyond field padding). */
  padding: 0 !important;
  height: auto !important;
}

/* Mobile: keep the combined color field robust (global rules above would otherwise win) */
@media (max-width: 760px){
  .hd-breed-colorfield{
    /* single-row field like Desktop */
    padding-left: 12px !important;
    padding-right: 8px !important;
    min-height: 40px !important;
  }
  .hd-breed-colorfield .hd-breed-select{
    height: 38px !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Mobile: keep the swatches slightly inset from the right edge (like other select arrows) */
  .hd-breed-colorfield .hd-breed-swatches{
    padding-right: 0 !important;
  }
}

/* Empty state when no breeds match the filters */
.breedbox--empty{
  border: 1px dashed rgba(0,0,0,.18) !important;
  box-shadow: none !important;
}
.breedbox--empty .breedbox__inner{
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.breedbox--empty .breedbox__content{
  padding: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 14px !important;
  text-align: center !important;
}
.breedbox--empty .breedbox__title{
  min-height: 0 !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--hd-green-600) !important;
}
.breedbox--empty:hover .breedbox__title{ color: var(--hd-green-600) !important; }

/* Reset button inside the empty state */
.hd-reset-filters-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  background: var(--hd-green-600);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.hd-reset-filters-btn:hover{ filter: brightness(0.95); }
.hd-reset-filters-btn:active{ transform: translateY(1px); }
.breedbox__emptytext{
  margin: 0;
  color: rgb(75 85 99);
  font-weight: 600;
  line-height: 1.55;
}

@media (max-width: 760px){
  .breedbox--empty .breedbox__content{ max-width: 100%; }
}

/* Swatches visible */
.hd-swatch{
  background: var(--swatch) !important;
}
.hd-swatch.is-white{
  background: #fff !important;
}

/* Mourning ribbon: wider + opaque */
.breedbox__mourning-ribbon{
  width: 180px !important;
  height: 22px !important;
  background: #000 !important;
  right: -60px !important;
}



/* Keep bottom row as flex (button left, count right) */
.hd-breed-filters__row--bottom{
  display:flex !important;
  justify-content: space-between !important;
  align-items:center !important;
}


/* --- Overrides: ensure requested sizes are applied reliably --- */
.breedbox .breedbox__content h3.breedbox__title{font-size:27px !important;}
.hd-content h2, .hundello-prose h2{font-size:27px !important;}


/* ===========================
   v1.0.72 – Breed list polish
   - Title vertically centered in reserved box
   - Tighter data spacing (less white space)
   - Prevent card from exceeding 250px (no white strip under image)
   =========================== */

.breedbox__titlewrap{display:block;}

@media (min-width: 761px){
  /* Lock the entire card height to the image height */
  .breedbox__inner{
    height: 250px !important;
    align-items: stretch !important;
  }

  .breedbox__content{
    height: 250px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 16px 12px !important;
  }

  /* Reserve a two-line title area and center the title inside it */
  .breedbox__titlewrap{
    height: 62px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 8px !important;
    flex: 0 0 auto !important;
  }

  .breedbox .breedbox__content h3.breedbox__title{
    margin: 0 !important;
    font-size: 27px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    max-height: 62px !important;
  }

  /* Tighter, cleaner data block */
  .breedbox__columns{
    flex: 1 1 auto !important;
    overflow: hidden !important;
    gap: 14px !important;
  }
  .breedbox__col{gap: 4px !important;}
  .breedbox__row{
    padding: 0 !important;
    column-gap: 8px !important;
    grid-template-columns: 110px 1fr !important;
  }
  .breedbox__label{
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  .breedbox__value{
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ===========================
   v1.0.73 – Breed card typography alignment
   - Breed title uses same typography as prose H2, but +5px
   - Data text matches body text size (16px)
   - Keep reserved title height so data never shifts when title wraps
   =========================== */

@media (min-width: 761px){
  /* Reserve exactly 2 lines at 32px/1.25 and center title vertically */
  .breedbox__titlewrap{
    height: 84px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 6px !important;
  }

  /* H3 title: adopt prose H2 styling +5px */
  .breedbox .breedbox__content h3.breedbox__title{
    margin: 0 !important;
    font-size: 32px !important;            /* 27px (H2) + 5px */
    font-weight: 800 !important;           /* like prose H2 */
    color: rgb(31 41 55) !important;       /* like prose H2 */
    line-height: 1.25 !important;          /* like prose H2 */
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    max-height: 84px !important;
  }

  /* Data block: tighter spacing and body-sized type */
  .breedbox__columns{gap: 14px !important;}
  .breedbox__col{gap: 2px !important;}
  .breedbox__row{
    grid-template-columns: 110px 1fr !important;
    column-gap: 8px !important;
    padding: 0 !important;
  }

  .breedbox__label,
  .breedbox__value{
    font-size: 16px !important;            /* match body text size */
    line-height: 1.25 !important;
  }

  .breedbox__label{
    font-weight: 700 !important;
    color: rgb(31 41 55) !important;
  }

  .breedbox__value{
    font-weight: 500 !important;
    color: rgb(55 65 81) !important;
  }
}

/* ===========================
   v1.0.74 – Breed list refinements
   1) Hover: title turns hellgrün
   2) Desktop/Tablet: card + image 230x230 (image stays square)
   3) Title always one line (shrinks via JS if needed)
   4) Mourning ribbon: wider and fully black
   =========================== */

@media (min-width: 761px){
  /* Card height + image size */
  .breedbox__inner{
    height: 230px !important;
    align-items: stretch !important;
  }

  .breedbox__media{
    flex: 0 0 230px !important;
    width: 230px !important;
    max-width: 230px !important;
    height: 230px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }

  .breedbox__media img,
  .breedbox__img--placeholder{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    display: block !important;
  }

  .breedbox__content{
    height: 230px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 14px 10px !important;
  }

  /* Title: one-line, centered in reserved area */
  .breedbox__titlewrap{
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 6px !important;
    flex: 0 0 auto !important;
  }

  .breedbox .breedbox__content h3.breedbox__title{
    margin: 0 !important;
    font-size: 32px !important; /* base size; will shrink in JS if needed */
    font-weight: 600 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important; /* no ellipsis – we shrink instead */
  }

  /* Data block: compact spacing (to fit 230px height) */
  .breedbox__columns{
    flex: 1 1 auto !important;
    overflow: hidden !important;
    gap: 12px !important;
  }
  .breedbox__col{gap: 3px !important;}
  .breedbox__row{
    padding: 0 !important;
    column-gap: 8px !important;
    grid-template-columns: 112px 1fr !important;
  }
  .breedbox__label,
  .breedbox__value{
    font-size: var(--hd-body-size, 16px) !important;
    line-height: 1.2 !important;
  }
}

@media (hover:hover){
  .breedbox:hover .breedbox__title{
    color: #A9C947 !important;
  }
}

/* Mourning ribbon: wider + fully black */
.breedbox__mourning-ribbon{
  height: 22px !important;
  width: 170px !important;
  right: -52px !important;
  background: #000 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}


/* ===========================
   v1.0.76 – Breed card title restore + hover + fixed 230px square media
   =========================== */

@media (min-width: 761px){
  .hd-breed-module .breedbox__inner{
    height: 230px !important;
    align-items: stretch !important;
  }

  .hd-breed-module .breedbox__media{
    flex: 0 0 230px !important;
    width: 230px !important;
    max-width: 230px !important;
    height: 230px !important;
    overflow: hidden !important;
  }

  .hd-breed-module .breedbox__media img,
  .hd-breed-module .breedbox__img--placeholder{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    display: block !important;
  }

  .hd-breed-module .breedbox__content{
    height: 230px !important;
    padding: 10px 16px 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Keep the title area stable and vertically centered */
  .hd-breed-module .breedbox__titlewrap{
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 6px !important;
  }

  /* H3: same styling as prose H2 + 5px (H2 is 27px in this theme) */
  .hd-breed-module .breedbox__title{
    margin: 0 !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.2px !important;
    color: rgb(31 41 55) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    transition: color .18s ease !important;
  }

  /* Data area: compact like original (no "blown up" whitespace) */
  .hd-breed-module .breedbox__columns{
    margin-top: 0 !important;
    gap: 14px !important;
  }
  .hd-breed-module .breedbox__col{ gap: 4px !important; }

  .hd-breed-module .breedbox__row{
    grid-template-columns: 120px 1fr !important;
    column-gap: 10px !important;
    padding: 1px 0 !important;
  }

  .hd-breed-module .breedbox__label,
  .hd-breed-module .breedbox__value{
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
  .hd-breed-module .breedbox__value{
    white-space: nowrap !important;
  }
}

@media (hover:hover){
  /* Shadow hover (backup applies also when the <a> is hovered) */
  .hd-breed-module .breedbox:hover{
    box-shadow: 0 10px 26px rgba(0,0,0,.14) !important;
  }
  .hd-breed-module .breedbox__link:hover .breedbox__inner{
    box-shadow: 0 10px 26px rgba(0,0,0,.14) !important;
  }

  /* Title turns hellgrün on hover */
  .hd-breed-module .breedbox:hover .breedbox__title,
  .hd-breed-module .breedbox__link:hover .breedbox__title{
    color: #A9C947 !important;
  }
}

/* Mourning ribbon: wider + fully opaque */
.hd-breed-module .breedbox__mourning-ribbon{
  height: 22px !important;
  width: 170px !important;
  background: #000 !important;
  opacity: 1 !important;
}

/* v1.0.76 – override legacy line-clamp rules for breed title */
@media (min-width: 761px){
  .hd-breed-module .breedbox__title{
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    max-height: none !important;
    min-height: 0 !important;
  }
}

/* v1.0.78 overrides */
.breedbox__title{ font-weight: 900 !important; }


/* v1.0.78 – enforce bold breed title */
.hd-breed-module h3.breedbox__title{font-weight:900 !important;}

/* ===========================
   v1.0.79 – UI polish
   1) Breed list: title slightly thicker across browsers
   2) Remove browser/OS focus highlight (inputs/selects/checkboxes)
   =========================== */

/* 1) Breed list title: ensure the strongest available weight wins (even vs high-specificity legacy rules)
      + add a very subtle shadow trick to emulate a slightly thicker stroke on browsers where 900 looks thin */
.breedbox .breedbox__content h3.breedbox__title,
.hd-breed-module .breedbox .breedbox__content h3.breedbox__title,
.hd-breed-module h3.breedbox__title,
.breedbox__title{
  font-weight: 900 !important;
  font-synthesis: weight;
  text-shadow: 0.25px 0 0 currentColor, -0.25px 0 0 currentColor;
}

/* 2) Remove the unwanted focus outline/ring (Tailwind forms + browser default)
      NOTE: this intentionally disables the blue focus glow everywhere in the frontend, as requested. */
input:focus,
select:focus,
textarea:focus,
button:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
.hd-breed-input:focus,
.hd-breed-select:focus,
.hd-breed-attr-toggle:focus,
.hd-breed-more-toggle:focus{
  outline: none !important;
  box-shadow: none !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-multiselect:focus,
.form-checkbox:focus,
.form-radio:focus,
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.form-multiselect:focus-visible,
.form-checkbox:focus-visible,
.form-radio:focus-visible,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  border-color: inherit !important;
}


/* ===========================
   v1.0.80 – Fine tuning
   - Breed card title weight aligned with H1 (800), not extra-bold
   - Remove artificial thickening shadow
   =========================== */

.breedbox .breedbox__content h3.breedbox__title,
.hd-breed-module .breedbox .breedbox__content h3.breedbox__title,
.hd-breed-module h3.breedbox__title,
.breedbox__title{
  font-weight: 800 !important;
  text-shadow: none !important;
}


/* v1.0.103 – Mobile breed title: smaller like original, never split words */
@media (max-width: 760px){
  .hd-breed-module .breedbox .breedbox__content h3.breedbox__title{
    font-size: 14px !important;
    line-height: 1.14 !important;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}


/* v1.0.106 shared breed search: autocomplete wrapper for list filter search */
.hd-breed-search-wrap{
  position: relative;
  z-index: 45;
  width: 100%;
  min-width: 0;
}
.hd-breed-search-wrap .hd-breed-input{
  width: 100% !important;
  min-width: 0 !important;
}
.hd-breed-search-wrap > ul{
  z-index: 70;
}

/* v1.0.113: Filterbar suggestions must visually match the HEADER dropdown.
   In the content area, .hd-content li adds padding-left/margins, which pushed the
   suggestion text to the right. Force the LI box-model to the same values as app.css
   (used by the header search), but scoped ONLY to the filterbar search. */
.hd-breed-filters .autoComplete_wrapper > ul > li{
  margin: .3rem !important;
  padding: .3rem .5rem !important;
}

/* Safety: the wrapper created by JS on the filter input must stretch full width */
.hd-breed-filters .autoComplete_wrapper{
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 45;
}

.hd-breed-filters .autoComplete_wrapper > ul{
  /* IMPORTANT:
     This autocomplete <ul> lives inside .hd-content, where our prose styles
     set padding-left + list-style for generic ULs.
     That caused the suggestions to be shifted to the right (indent).
     Reset those UL defaults here so it matches the header autocomplete. */
  list-style: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Keep the intended dropdown spacing from app.css */
  margin-top: .5rem !important;
  margin-bottom: 0 !important;
  z-index: 70;
}

/* Grid placement for wrapped search field in the breed filter bar */
.hd-breed-filters__row--main .hd-breed-search-wrap{
  grid-column: 1 / span 2 !important;
}
@media (max-width: 760px){
  .hd-breed-filters__row--main .hd-breed-search-wrap{
    grid-area: search !important;
  }
}

/* v1.0.126 – breed detail gallery: square stage, limited preview rail, large-gallery handling */
.hundello-breed-showcase{
  gap: 20px;
}
@media (min-width: 1100px){
  .hundello-breed-showcase{
    grid-template-columns: minmax(0, 1.75fr) 320px;
  }
}

.hundello-breed-gallery-card{
  padding: 16px;
}
@media (min-width: 768px){
  .hundello-breed-gallery-card{
    padding: 20px;
  }
}

.hundello-breed-gallery{
  gap: 12px;
}
.hundello-breed-gallery-stagewrap{
  border-radius: 24px;
}
.hundello-breed-gallery-stage{
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(243,244,246,.95));
}
.hundello-breed-gallery-main{
  object-fit: cover;
}
.hundello-breed-gallery-foot{
  padding: 12px 14px;
}
.hundello-breed-gallery-caption{
  min-width: 0;
}

.hundello-breed-gallery-strip{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.hundello-breed-gallery-thumbs{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.hundello-breed-gallery-strip-nav{
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(243 244 246);
  color: rgb(31 41 55);
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.hundello-breed-gallery-strip-nav:hover{
  background: rgb(229 231 235);
}
.hundello-breed-gallery-strip-nav:disabled{
  opacity: .45;
  cursor: default;
}
.hundello-breed-gallery-thumb{
  border-radius: 18px;
  aspect-ratio: 1 / 1;
  flex: initial;
}
.hundello-breed-gallery-thumb img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.hundello-breed-gallery-strip-meta{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: rgb(75 85 99);
}
.hundello-breed-gallery-strip-window{
  font-weight: 800;
  color: rgb(31 41 55);
}
.hundello-breed-gallery-strip-hint{
  text-align: right;
}

@media (max-width: 860px){
  .hundello-breed-gallery-thumbs{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 540px){
  .hundello-breed-gallery-card{
    padding: 14px;
  }
  .hundello-breed-gallery-strip{
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }
  .hundello-breed-gallery-thumbs{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .hundello-breed-gallery-thumb{
    border-radius: 14px;
  }
  .hundello-breed-gallery-strip-nav{
    width: 36px;
    height: 36px;
    font-size: 26px;
  }
  .hundello-breed-gallery-strip-meta{
    flex-direction: column;
    align-items: flex-start;
  }
  .hundello-breed-gallery-strip-hint{
    text-align: left;
  }
}


/* v1.0.128 – breed detail gallery cleanup: transparent fullscreen badge, endless rail, sidebar banner */
@media (min-width:1000px){
  .hundello-breed-showcase{grid-template-columns:minmax(0,1fr) 300px}
  .hundello-breed-sidebar-ad{width:300px;max-width:100%;justify-self:end;position:sticky;top:110px;align-self:start}
}
.hundello-breed-gallery-head{margin-bottom:14px}
.hundello-breed-gallery-copy{max-width:none}
.hundello-breed-gallery-copy .hundello-h1{margin-bottom:8px}
.hundello-breed-gallery-copy .hundello-lead{margin-bottom:0}
.hundello-breed-gallery-expand{
  top:14px;
  right:14px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  font-size:13px;
  font-weight:800;
  line-height:1;
}
.hundello-breed-gallery-expand:hover{background:rgba(0,0,0,.5)}
.hundello-breed-gallery-strip{margin-top:2px}
.hundello-breed-gallery-thumb{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
@media (max-width:540px){
  .hundello-breed-gallery-expand{
    top:10px;
    right:10px;
    padding:8px 12px;
    font-size:12px;
  }
}

.hundello-breed-gallery-kicker,
.hundello-breed-gallery-count,
.hundello-breed-gallery-caption,
.hundello-breed-gallery-position,
.hundello-breed-gallery-foot,
.hundello-breed-gallery-strip-meta,
.hundello-breed-summary{display:none !important}


/* v1.0.129 – breed detail: cleaner single-image lightbox, smaller title, responsive facts grid */
.hundello-breed-gallery-copy .hundello-h1{
  font-size: 32px !important;
  line-height: 1.12 !important;
}
@media (max-width: 760px){
  .hundello-breed-gallery-copy .hundello-h1{
    font-size: 26px !important;
    line-height: 1.14 !important;
  }
}

.hundello-breed-lightbox{
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.hundello-breed-lightbox-inner{
  max-width: min(92vw, 1400px);
  max-height: calc(100vh - 48px);
}
.hundello-breed-lightbox-img{
  max-width: 100%;
  max-height: calc(100vh - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
}
.hundello-breed-lightbox-nav,
.hundello-breed-lightbox-meta,
.hundello-breed-lightbox-caption,
.hundello-breed-lightbox-position{
  display: none !important;
}

.hundello-meta{
  padding: 18px;
}
@media (min-width: 768px){
  .hundello-meta{
    padding: 22px;
  }
}
.hundello-meta-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.hundello-meta-item{
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgb(249 250 251);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.hundello-meta-item__label{
  margin-bottom: 6px;
  color: rgb(107 114 128);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.hundello-meta-item__value{
  color: rgb(31 41 55);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: normal;
}
@media (max-width: 640px){
  .hundello-meta-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hundello-meta-item{
    padding: 11px 12px;
    border-radius: 14px;
  }
  .hundello-meta-item__value{
    font-size: 15px;
  }
}


/* v1.0.130 – backend-ready ad slots + refined fact layout */
.hundello-ad-slot{
  display:flex;
  justify-content:center;
  align-items:center;
}
.hundello-ad-slot__link,
.hundello-ad-slot__img{
  display:block;
}
.hundello-ad-slot__img{
  width:100%;
  height:auto;
  border-radius:18px;
}
.hundello-ad-slot--skyscraper .hundello-ad-slot__img,
.hundello-ad-slot__img--skyscraper{
  max-width:300px;
}
.hundello-ad-slot__img--square{
  max-width:320px;
}
.hundello-section-ad{
  margin:18px auto 0;
}
@media (min-width: 768px){
  .hundello-section-ad{
    margin-top:22px;
  }
}
.hd-breed-grid .hd-inline-ad-card{
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.1);
  border:1px solid rgba(0,0,0,.06);
}
@media (max-width:760px){
  .hd-breed-grid .hd-inline-ad-card{
    grid-column:1 / -1;
    padding:10px;
  }
}
.hundello-meta-tags{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06);
}
.hundello-meta-tags__label{
  margin-bottom:10px;
  color:rgb(107 114 128);
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.hundello-meta-tags__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hundello-meta-tag{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(169,201,71,.14);
  color:rgb(31 41 55);
  font-size:15px;
  line-height:1.35;
  font-weight:700;
}
@media (max-width:640px){
  .hundello-meta-tags{
    margin-top:12px;
    padding-top:12px;
  }
  .hundello-meta-tags__list{
    gap:8px;
  }
  .hundello-meta-tag{
    min-height:36px;
    padding:7px 12px;
    font-size:14px;
  }
}

/* v1.0.131 – mobile-only inline ads, improved coat colors, previous/next breed cards */
.hundello-mobile-only-ad{
  display:block;
}
@media (min-width: 768px){
  .hundello-mobile-only-ad{
    display:none !important;
  }
}

.hundello-meta-colors{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06);
}
.hundello-meta-colors__label{
  margin-bottom:10px;
  color:rgb(107 114 128);
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.hundello-meta-colors__body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hundello-meta-color-patterns,
.hundello-meta-color-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hundello-meta-pattern-chip{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 12px;
  border-radius:999px;
  background:rgb(243 244 246);
  color:rgb(31 41 55);
  font-size:14px;
  line-height:1.35;
  font-weight:700;
}
.hundello-meta-color-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  color:rgb(31 41 55);
  font-size:15px;
  line-height:1.35;
  font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.hundello-meta-color-pill.is-light{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
.hundello-meta-color-pill__dot{
  width:16px;
  height:16px;
  border-radius:999px;
  flex:0 0 16px;
  background:var(--hd-swatch, #d1d5db);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.hundello-meta-color-pill__name{
  display:block;
}

.hundello-breed-nav{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.hundello-breed-nav-card{
  display:block;
  min-width:0;
  padding:16px;
  border-radius:20px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hundello-breed-nav-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.11);
  border-color:rgba(169,201,71,.5);
}
.hundello-breed-nav-card--empty{
  visibility:hidden;
  pointer-events:none;
}
.hundello-breed-nav-card__eyebrow{
  display:block;
  margin-bottom:10px;
  color:rgb(107 114 128);
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.hundello-breed-nav-card__body{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.hundello-breed-nav-card--next .hundello-breed-nav-card__body{
  justify-content:flex-end;
  text-align:right;
}
.hundello-breed-nav-card--next .hundello-breed-nav-card__body .hundello-breed-nav-card__thumb{
  order:2;
}
.hundello-breed-nav-card__thumb{
  width:56px;
  height:56px;
  flex:0 0 56px;
  overflow:hidden;
  border-radius:14px;
  background:rgb(243 244 246);
}
.hundello-breed-nav-card__thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hundello-breed-nav-card__title{
  display:block;
  min-width:0;
  color:rgb(31 41 55);
  font-size:18px;
  line-height:1.2;
  font-weight:800;
  overflow-wrap:anywhere;
}

@media (max-width: 640px){
  .hundello-meta-colors{
    margin-top:12px;
    padding-top:12px;
  }
  .hundello-meta-color-patterns,
  .hundello-meta-color-pills{
    gap:8px;
  }
  .hundello-meta-pattern-chip,
  .hundello-meta-color-pill{
    min-height:36px;
    padding:7px 12px;
    font-size:14px;
  }
  .hundello-breed-nav{
    grid-template-columns:1fr;
    gap:12px;
  }
  .hundello-breed-nav-card{
    padding:14px;
    border-radius:18px;
  }
  .hundello-breed-nav-card--empty{
    display:none;
  }
  .hundello-breed-nav-card__eyebrow{
    margin-bottom:8px;
  }
  .hundello-breed-nav-card__thumb{
    width:52px;
    height:52px;
    flex-basis:52px;
  }
  .hundello-breed-nav-card__title{
    font-size:16px;
  }
}


/* v1.0.132 – subtler prev/next nav, cleaner coat colors, robust breed description */
.hundello-meta-coat{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06);
}
.hundello-meta-coat__label{
  margin-bottom:10px;
  color:rgb(107 114 128);
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.hundello-meta-coat__panel{
  padding:12px 14px;
  border-radius:16px;
  background:rgb(249 250 251);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  display:grid;
  gap:12px;
}
.hundello-meta-coat__row{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:12px;
  align-items:start;
}
.hundello-meta-coat__row-label{
  color:rgb(107 114 128);
  font-size:13px;
  line-height:1.4;
  font-weight:700;
}
.hundello-meta-coat__row-value{
  min-width:0;
  color:rgb(31 41 55);
  font-size:15px;
  line-height:1.5;
  font-weight:700;
  overflow-wrap:anywhere;
}
.hundello-meta-coat__swatches{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
}
.hundello-meta-coat__swatch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.hundello-meta-coat__swatch.is-light .hundello-meta-coat__swatch-dot{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
.hundello-meta-coat__swatch-dot{
  width:14px;
  height:14px;
  flex:0 0 14px;
  border-radius:999px;
  background:var(--hd-swatch, #d1d5db);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.hundello-meta-coat__swatch-name{
  min-width:0;
}

.hundello-breed-nav{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.hundello-breed-nav-card{
  display:block;
  min-width:0;
  padding:14px 16px;
  border-radius:18px;
  background:rgb(243 244 246);
  color:inherit;
  text-decoration:none;
  box-shadow:none;
  border:0;
  transition:background-color .16s ease;
}
.hundello-breed-nav-card:hover{
  transform:none;
  box-shadow:none;
  border-color:transparent;
  background:rgb(229 231 235);
}
.hundello-breed-nav-card__eyebrow{
  display:block;
  margin-bottom:8px;
  color:rgb(107 114 128);
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.hundello-breed-nav-card__body{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.hundello-breed-nav-card__thumb{
  width:52px;
  height:52px;
  flex:0 0 52px;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
}
.hundello-breed-nav-card__title{
  display:block;
  min-width:0;
  color:rgb(31 41 55);
  font-size:17px;
  line-height:1.2;
  font-weight:800;
  overflow-wrap:anywhere;
}

@media (max-width: 640px){
  .hundello-meta-coat{
    margin-top:12px;
    padding-top:12px;
  }
  .hundello-meta-coat__panel{
    gap:10px;
    padding:11px 12px;
    border-radius:14px;
  }
  .hundello-meta-coat__row{
    grid-template-columns:1fr;
    gap:4px;
  }
  .hundello-meta-coat__row-label{
    font-size:12px;
  }
  .hundello-meta-coat__row-value{
    font-size:14px;
  }
  .hundello-meta-coat__swatches{
    gap:8px 12px;
  }
}


/* v1.0.133 – mobile ads full width, desktop-only non-square ads, denser mobile facts, subtler fur block, side-by-side mobile next/prev */
.hundello-desktop-only-ad{
  display:block;
}
@media (max-width: 999px){
  .hundello-desktop-only-ad{
    display:none !important;
  }
}

.hundello-mobile-only-ad,
.hundello-mobile-only-ad .hundello-ad-slot,
.hundello-mobile-only-ad .hundello-ad-slot__link{
  width:100%;
}
.hundello-mobile-only-ad .hundello-ad-slot__img,
.hundello-mobile-only-ad .hundello-ad-slot__img--square{
  width:100%;
  max-width:none;
  height:auto;
}
.hundello-section-ad{
  width:100%;
}
.hd-breed-grid .hd-inline-ad-card{
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
  border-radius:0;
}
@media (max-width:760px){
  .hd-breed-grid .hd-inline-ad-card{
    grid-column:1 / -1;
    padding:0;
  }
}

@media (max-width: 640px){
  .hundello-meta-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .hundello-meta-item{
    padding:11px 12px;
    border-radius:14px;
  }
  .hundello-meta-item__value{
    font-size:15px;
  }
}
@media (max-width: 380px){
  .hundello-meta-grid{
    grid-template-columns:1fr;
  }
}

.hundello-meta-fur{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06);
}
.hundello-meta-fur__heading{
  margin-bottom:10px;
  color:rgb(107 114 128);
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.hundello-meta-fur__panel{
  display:grid;
  gap:10px;
}
.hundello-meta-fur__group{
  padding:12px 14px;
  border-radius:16px;
  background:rgb(249 250 251);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.hundello-meta-fur__subhead{
  margin-bottom:6px;
  color:rgb(107 114 128);
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.hundello-meta-fur__text{
  color:rgb(31 41 55);
  font-size:15px;
  line-height:1.5;
  font-weight:700;
  overflow-wrap:anywhere;
}
.hundello-meta-fur__colors{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
}
.hundello-meta-fur__color{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:rgb(31 41 55);
  font-size:15px;
  line-height:1.45;
  font-weight:700;
}
.hundello-meta-fur__dot{
  width:14px;
  height:14px;
  flex:0 0 14px;
  border-radius:999px;
  background:var(--hd-swatch, #d1d5db);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.hundello-meta-fur__color.is-light .hundello-meta-fur__dot{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
@media (max-width: 640px){
  .hundello-meta-fur{
    margin-top:12px;
    padding-top:12px;
  }
  .hundello-meta-fur__group{
    padding:11px 12px;
    border-radius:14px;
  }
  .hundello-meta-fur__text,
  .hundello-meta-fur__color{
    font-size:14px;
  }
  .hundello-meta-fur__colors{
    gap:8px 12px;
  }
}

.hundello-breed-nav{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.hundello-breed-nav-card--next,
.hundello-breed-nav-card--next .hundello-breed-nav-card__eyebrow,
.hundello-breed-nav-card--next .hundello-breed-nav-card__title{
  text-align:right;
}
.hundello-breed-nav-card--next .hundello-breed-nav-card__body{
  justify-content:flex-end;
  text-align:right;
}
.hundello-breed-nav-card--next .hundello-breed-nav-card__body .hundello-breed-nav-card__thumb{
  order:2;
}
@media (max-width: 640px){
  .hundello-breed-nav{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .hundello-breed-nav-card{
    padding:12px;
    border-radius:16px;
  }
  .hundello-breed-nav-card__eyebrow{
    margin-bottom:7px;
    font-size:11px;
  }
  .hundello-breed-nav-card__body{
    gap:8px;
    align-items:flex-start;
  }
  .hundello-breed-nav-card__thumb{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:10px;
  }
  .hundello-breed-nav-card__title{
    font-size:14px;
    line-height:1.2;
  }
}


/* v1.0.135 – robust breed description fallback + no mid-word breaks in mobile prev/next */
.hundello-breed-nav-card__title{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

@media (max-width: 640px){
  .hundello-breed-nav-card__title{
    font-size:13px;
    line-height:1.25;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
}

@media (max-width: 420px){
  .hundello-breed-nav-card__thumb{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .hundello-breed-nav-card__body{
    gap:7px;
  }
  .hundello-breed-nav-card__title{
    font-size:12px;
  }
}

#hundello-beschreibung{
  margin-top:18px;
}

/* v1.0.135 – SEO semantics + calmer fur color layout */
.hundello-meta-grid{
  margin:0;
}

.hundello-meta-item__value{
  margin:0;
}

.hundello-meta-furlist{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(229,231,235,.95);
}

.hundello-meta-furlist__row{
  display:grid;
  grid-template-columns:minmax(120px, 180px) minmax(0, 1fr);
  gap:12px 16px;
  align-items:start;
  padding:10px 0;
}

.hundello-meta-furlist__row + .hundello-meta-furlist__row{
  border-top:1px solid rgba(243,244,246,.95);
}

.hundello-meta-furlist__label{
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
}

.hundello-meta-furlist__value{
  min-width:0;
  color:#1f2937;
  font-size:15px;
  line-height:1.6;
}

.hundello-meta-furlist__value--colors{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
}

.hundello-meta-furlist__color{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.hundello-meta-furlist__dot{
  width:12px;
  height:12px;
  flex:0 0 12px;
  border-radius:999px;
  background:var(--hd-swatch, #d1d5db);
  border:1px solid rgba(17,24,39,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

.hundello-meta-furlist__color.is-light .hundello-meta-furlist__dot{
  border-color:rgba(17,24,39,.28);
}

.hundello-meta-furlist__name{
  color:#374151;
}

@media (max-width: 767px){
  .hundello-meta-furlist__row{
    grid-template-columns:1fr;
    gap:6px;
  }

  .hundello-meta-furlist__value{
    font-size:14px;
  }

  .hundello-meta-furlist__value--colors{
    gap:8px 14px;
  }
}

/* v1.0.137 – refined breed description layout with individual FAQ quotes and calmer desktop spacing */
.hundello-breed-description-card{
  overflow:hidden;
}

.hundello-breed-description-prose{
  color:#374151;
}

@media (min-width: 1024px){
  .hundello-breed-description-prose{
    padding-inline:18px;
  }
}

.hundello-breed-description-prose > *:first-child{
  margin-top:0 !important;
}

.hundello-breed-description-prose > *:last-child{
  margin-bottom:0 !important;
}

.hundello-breed-description-prose .hundello-prose-intro{
  margin:0 0 1.5rem;
  padding:0 0 1.35rem;
  border-bottom:1px solid rgba(229,231,235,.95);
  color:#374151;
  font-size:18px;
  line-height:1.9;
  font-weight:700;
}

.hundello-breed-description-prose h2,
.hundello-breed-description-prose .hundello-prose-section-heading:is(h2){
  position:relative;
  margin-top:2.35rem;
  padding-top:.2rem;
}

.hundello-breed-description-prose h2::after,
.hundello-breed-description-prose .hundello-prose-section-heading:is(h2)::after{
  content:"";
  display:block;
  width:56px;
  height:4px;
  margin-top:.8rem;
  border-radius:999px;
  background:rgba(169,201,71,.75);
}

.hundello-breed-description-prose h3,
.hundello-breed-description-prose .hundello-prose-section-heading:is(h3){
  margin-top:1.85rem;
  font-size:22px;
  line-height:1.35;
}

.hundello-breed-description-prose h4,
.hundello-breed-description-prose .hundello-prose-section-heading:is(h4){
  margin-top:1.45rem;
  font-size:18px;
  line-height:1.4;
}

.hundello-breed-description-prose p + ul,
.hundello-breed-description-prose p + ol,
.hundello-breed-description-prose h2 + ul,
.hundello-breed-description-prose h2 + ol,
.hundello-breed-description-prose h3 + ul,
.hundello-breed-description-prose h3 + ol{
  margin-top:-.15rem;
}

.hundello-breed-description-prose figure,
.hundello-breed-description-prose .wp-block-image,
.hundello-breed-description-prose .wp-block-table,
.hundello-breed-description-prose table{
  margin:1.75rem 0;
}

.hundello-breed-description-prose img{
  border-radius:18px;
}

.hundello-breed-description-prose figcaption{
  margin-top:.7rem;
  color:#6b7280;
  font-size:13px;
  line-height:1.5;
}

.hundello-breed-description-prose table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid rgba(229,231,235,.95);
  border-radius:18px;
}

.hundello-breed-description-prose table th,
.hundello-breed-description-prose table td{
  padding:12px 14px;
  text-align:left;
  vertical-align:top;
}

.hundello-breed-description-prose table th{
  color:#1f2937;
  font-weight:800;
  background:#f9fafb;
}

.hundello-breed-description-prose table tr + tr td,
.hundello-breed-description-prose table tr + tr th{
  border-top:1px solid rgba(229,231,235,.8);
}

.hundello-breed-description-prose .hundello-prose-section-heading--faq{
  margin-top:2.4rem;
}

.hundello-breed-description-prose .hundello-faq-question{
  margin:1.1rem 0 .85rem;
  padding:26px 22px 18px;
  border-radius:20px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(249,250,251,.95));
  color:#111827;
  font-style:normal;
}

.hundello-breed-description-prose .hundello-faq-question::before{
  top:12px;
  left:16px;
  color:rgba(156,163,175,.85);
  font-size:46px;
}

.hundello-breed-description-prose .hundello-faq-question p{
  margin:0;
  color:#1f2937;
  font-size:18px;
  line-height:1.65;
  font-weight:800;
}

.hundello-breed-description-prose .hundello-faq-question + p,
.hundello-breed-description-prose .hundello-faq-question + ul,
.hundello-breed-description-prose .hundello-faq-question + ol{
  margin-top:.15rem;
}

@media (max-width: 767px){
  .hundello-breed-description-prose .hundello-prose-intro{
    font-size:17px;
    line-height:1.8;
    padding-bottom:1.1rem;
  }

  .hundello-breed-description-prose h2,
  .hundello-breed-description-prose .hundello-prose-section-heading:is(h2){
    margin-top:2rem;
  }

  .hundello-breed-description-prose h2::after,
  .hundello-breed-description-prose .hundello-prose-section-heading:is(h2)::after{
    width:48px;
    margin-top:.65rem;
  }

  .hundello-breed-description-prose h3,
  .hundello-breed-description-prose .hundello-prose-section-heading:is(h3){
    font-size:20px;
  }

  .hundello-breed-description-prose .hundello-faq-question{
    padding:24px 18px 16px;
    margin:1rem 0 .75rem;
  }

  .hundello-breed-description-prose .hundello-faq-question p{
    font-size:17px;
    line-height:1.6;
  }

  .hundello-breed-description-prose table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* v1.0.138 – wider desktop prose padding and FAQ items as individual quote cards */
@media (min-width: 1024px){
  .hundello-breed-description-prose{
    padding-inline:56px;
  }
}

@media (min-width: 1360px){
  .hundello-breed-description-prose{
    padding-inline:72px;
  }
}

.hundello-breed-description-prose .hundello-faq-item{
  margin:1.15rem 0 1rem;
  padding:26px 22px 20px;
  border-radius:20px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(249,250,251,.95));
  color:#111827;
  font-style:normal;
}

.hundello-breed-description-prose .hundello-faq-item::before{
  top:12px;
  left:16px;
  color:rgba(156,163,175,.85);
  font-size:46px;
}

.hundello-breed-description-prose .hundello-faq-item__question{
  margin:0 0 .7rem;
  color:#1f2937;
  font-size:18px;
  line-height:1.6;
  font-weight:800;
}

.hundello-breed-description-prose .hundello-faq-item__answer-block{
  margin:.65rem 0 0;
  color:#374151;
  font-size:16px;
  line-height:1.8;
  font-weight:500;
}

.hundello-breed-description-prose .hundello-faq-item ul.hundello-faq-item__answer-block,
.hundello-breed-description-prose .hundello-faq-item ol.hundello-faq-item__answer-block{
  padding-left:1.15rem;
}

.hundello-breed-description-prose .hundello-faq-item > *:last-child{
  margin-bottom:0;
}

@media (max-width: 767px){
  .hundello-breed-description-prose .hundello-faq-item{
    padding:22px 18px 18px;
  }

  .hundello-breed-description-prose .hundello-faq-item__question{
    font-size:17px;
    line-height:1.55;
  }
}


/* v1.0.139 – detail-page quotes lighter, without quote marks, and links in light green */
.hundello-breed-description-prose a{
  color:var(--hd-green-500);
  font-weight:700;
}

.hundello-breed-description-prose a:hover{
  color:var(--hd-green-600);
}

.hundello-breed-description-prose blockquote,
.hundello-breed-description-prose .hundello-faq-question,
.hundello-breed-description-prose .hundello-faq-item{
  background:#f3f4f6;
}

.hundello-breed-description-prose blockquote,
.hundello-breed-description-prose .hundello-faq-question,
.hundello-breed-description-prose .hundello-faq-item{
  padding-top:24px;
}

.hundello-breed-description-prose blockquote::before,
.hundello-breed-description-prose blockquote::after,
.hundello-breed-description-prose .hundello-faq-question::before,
.hundello-breed-description-prose .hundello-faq-question::after,
.hundello-breed-description-prose .hundello-faq-item::before,
.hundello-breed-description-prose .hundello-faq-item::after,
.hundello-breed-description-prose blockquote p::before,
.hundello-breed-description-prose blockquote p::after{
  content:none !important;
  display:none !important;
}

/* v1.0.141 – robust swipe on breed gallery for touch devices */


/* v1.0.142 – smoother breed-gallery swipe, touch thumbnail rail, auto-hiding stage controls */
.hundello-breed-gallery-stage{
  --hd-stage-dx: 0px;
}
.hundello-breed-gallery-main{
  transform: translate3d(var(--hd-stage-dx), 0, 0);
  transition: transform .24s ease;
  will-change: transform;
}
.hundello-breed-gallery-stage.is-dragging .hundello-breed-gallery-main{
  transition: none;
}
.hundello-breed-gallery-stage.is-settling .hundello-breed-gallery-main{
  transition: transform .24s ease;
}
.hundello-breed-gallery-nav,
.hundello-breed-gallery-expand{
  transition: opacity .55s ease, transform .55s ease, background .25s ease;
}
.hundello-breed-gallery-nav--prev{
  transform: translate3d(0, -50%, 0);
}
.hundello-breed-gallery-nav--next{
  transform: translate3d(0, -50%, 0);
}
.hundello-breed-gallery-expand{
  transform: translate3d(0, 0, 0);
}
.hundello-breed-gallery-stagewrap.is-ui-hidden .hundello-breed-gallery-nav,
.hundello-breed-gallery-stagewrap.is-ui-hidden .hundello-breed-gallery-expand{
  opacity: 0;
  pointer-events: none;
}
.hundello-breed-gallery-stagewrap.is-ui-hidden .hundello-breed-gallery-nav--prev{
  transform: translate3d(-10px, -50%, 0);
}
.hundello-breed-gallery-stagewrap.is-ui-hidden .hundello-breed-gallery-nav--next{
  transform: translate3d(10px, -50%, 0);
}
.hundello-breed-gallery-stagewrap.is-ui-hidden .hundello-breed-gallery-expand{
  transform: translate3d(0, -8px, 0);
}
@media (max-width: 1024px){
  .hundello-breed-gallery-strip{
    grid-template-columns: minmax(0, 1fr);
  }
  .hundello-breed-gallery-strip-nav{
    display: none;
  }
  .hundello-breed-gallery-thumbs{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    padding: 2px 2px 8px;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .hundello-breed-gallery-thumb{
    flex: 0 0 90px;
    scroll-snap-align: start;
  }
}
@media (max-width: 540px){
  .hundello-breed-gallery-thumb{
    flex-basis: 82px;
  }
}

/* v1.0.143 – native mobile swipe track, draggable thumb rail, reliable control fade */
.hundello-breed-gallery-stage.is-track-ready{
  display:block;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  touch-action:pan-x pan-y pinch-zoom;
}
.hundello-breed-gallery-stage.is-track-ready::-webkit-scrollbar{
  display:none;
}
.hundello-breed-gallery-track{
  display:flex;
  width:100%;
  height:100%;
}
.hundello-breed-gallery-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.hundello-breed-gallery-track-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
.hundello-breed-gallery-stage [data-gallery-main][hidden]{
  display:none !important;
}
.hundello-breed-gallery-stagewrap.is-ui-hidden .hundello-breed-gallery-nav,
.hundello-breed-gallery-stagewrap.is-ui-hidden .hundello-breed-gallery-expand{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.hundello-breed-gallery-stagewrap .hundello-breed-gallery-nav,
.hundello-breed-gallery-stagewrap .hundello-breed-gallery-expand{
  visibility:visible;
}
@media (max-width:1024px){
  .hundello-breed-gallery-thumbs{
    cursor:grab;
    scroll-padding-inline:2px;
  }
  .hundello-breed-gallery-thumbs.is-dragging{
    cursor:grabbing;
    scroll-snap-type:none;
  }
  .hundello-breed-gallery-thumb{
    flex:0 0 92px;
  }
}
@media (max-width:540px){
  .hundello-breed-gallery-thumb{
    flex-basis:84px;
  }
}


/* v1.0.144 – fix native stage swipe and slower gallery control fade */
.hundello-breed-gallery-stage.is-track-ready{
  cursor:grab;
}
.hundello-breed-gallery-stage.is-track-ready:active{
  cursor:grabbing;
}
.hundello-breed-gallery-stagewrap .hundello-breed-gallery-nav,
.hundello-breed-gallery-stagewrap .hundello-breed-gallery-expand{
  will-change:opacity,transform;
}


/* v1.0.150 – stabilize mobile gallery, restore infinite swipe, reduce mobile image pressure */
.hundello-breed-gallery-track{
  opacity:1;
}
.hundello-breed-gallery-stage.is-track-ready{
  touch-action:pan-x pinch-zoom;
}

/* v1.0.150 – smoother loop-back swipe and desktop-only hover controls */
@media (max-width: 1024px), (hover: none), (pointer: coarse){
  .hundello-breed-gallery-stagewrap .hundello-breed-gallery-nav,
  .hundello-breed-gallery-stagewrap .hundello-breed-gallery-expand{
    display:none !important;
  }
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine){
  .hundello-breed-gallery-stagewrap .hundello-breed-gallery-nav,
  .hundello-breed-gallery-stagewrap .hundello-breed-gallery-expand{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .65s ease, transform .65s ease, background .25s ease;
  }
  .hundello-breed-gallery-stagewrap:hover .hundello-breed-gallery-nav,
  .hundello-breed-gallery-stagewrap:hover .hundello-breed-gallery-expand,
  .hundello-breed-gallery-stagewrap:focus-within .hundello-breed-gallery-nav,
  .hundello-breed-gallery-stagewrap:focus-within .hundello-breed-gallery-expand{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto;
  }
  .hundello-breed-gallery-stagewrap:hover .hundello-breed-gallery-nav--prev,
  .hundello-breed-gallery-stagewrap:focus-within .hundello-breed-gallery-nav--prev{
    transform:translate3d(0, -50%, 0) !important;
  }
  .hundello-breed-gallery-stagewrap:hover .hundello-breed-gallery-nav--next,
  .hundello-breed-gallery-stagewrap:focus-within .hundello-breed-gallery-nav--next{
    transform:translate3d(0, -50%, 0) !important;
  }
  .hundello-breed-gallery-stagewrap:hover .hundello-breed-gallery-expand,
  .hundello-breed-gallery-stagewrap:focus-within .hundello-breed-gallery-expand{
    transform:translate3d(0, 0, 0) !important;
  }
}


/* v1.0.150 – robust invisible loop jump for edge swipes */
.hundello-breed-gallery-stage.is-track-ready.is-loop-jumping{
  scroll-snap-type:none !important;
  scroll-behavior:auto !important;
}


/* v1.0.151 – triple-track infinite gallery loop without edge stall */
.hundello-breed-gallery-slide{
  scroll-snap-stop:normal;
}

/* v1.0.152 – rebuilt breed gallery with reliable infinite swipe reel */
.hundello-breed-gallery-stage{
  position:relative;
  overflow:hidden;
  touch-action:pan-y pinch-zoom;
}
.hundello-breed-gallery-stage.is-reel-ready{
  display:block;
  cursor:grab;
}
.hundello-breed-gallery-stage.is-reel-ready.is-dragging{
  cursor:grabbing;
}
.hundello-breed-gallery-stage.is-reel-ready .hundello-breed-gallery-main[hidden]{
  display:none !important;
}
.hundello-breed-gallery-stage.is-reel-ready .hundello-breed-gallery-track{
  position:absolute;
  inset:0;
  display:flex;
  width:300%;
  height:100%;
  transform:translate3d(-33.333333%, 0, 0);
  will-change:transform;
}
.hundello-breed-gallery-stage.is-reel-ready.is-dragging .hundello-breed-gallery-track{
  transition:none !important;
}
.hundello-breed-gallery-stage.is-reel-ready .hundello-breed-gallery-slide{
  flex:0 0 33.333333%;
  width:33.333333%;
  height:100%;
}
.hundello-breed-gallery-stage.is-reel-ready .hundello-breed-gallery-track-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}


/* v1.0.158 – rebuilt breed gallery reel with stable infinite swipe and faster adjacent preloading */
.hundello-breed-gallery-stage{
  position:relative;
  overflow:hidden;
  touch-action:pan-y pinch-zoom;
}
.hundello-breed-gallery-stage.is-reel-ready{
  display:block;
  cursor:grab;
}
.hundello-breed-gallery-stage.is-reel-ready.is-dragging{
  cursor:grabbing;
}
.hundello-breed-gallery-stage.is-reel-ready .hundello-breed-gallery-track{
  position:absolute;
  inset:0;
  display:flex;
  width:500%;
  height:100%;
  transform:translate3d(-200%, 0, 0);
  will-change:transform;
}
.hundello-breed-gallery-stage.is-reel-ready .hundello-breed-gallery-slide{
  flex:0 0 20%;
  width:20%;
  height:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(243,244,246,.95));
}
.hundello-breed-gallery-stage.is-reel-ready .hundello-breed-gallery-track-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
  backface-visibility:hidden;
}
.hundello-breed-gallery-stage.is-reel-ready .hundello-breed-gallery-main[hidden]{
  display:none !important;
}
.hundello-breed-gallery-stage.is-reel-ready.is-animating .hundello-breed-gallery-track,
.hundello-breed-gallery-stage.is-reel-ready.is-dragging .hundello-breed-gallery-track{
  visibility:visible;
}
@media (max-width: 1024px), (hover: none), (pointer: coarse){
  .hundello-breed-gallery-stagewrap .hundello-breed-gallery-nav,
  .hundello-breed-gallery-stagewrap .hundello-breed-gallery-expand{
    display:none !important;
  }
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine){
  .hundello-breed-gallery-stagewrap .hundello-breed-gallery-nav,
  .hundello-breed-gallery-stagewrap .hundello-breed-gallery-expand{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .75s ease, transform .75s ease, background .25s ease;
  }
  .hundello-breed-gallery-stagewrap:hover .hundello-breed-gallery-nav,
  .hundello-breed-gallery-stagewrap:hover .hundello-breed-gallery-expand,
  .hundello-breed-gallery-stagewrap:focus-within .hundello-breed-gallery-nav,
  .hundello-breed-gallery-stagewrap:focus-within .hundello-breed-gallery-expand{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto;
  }
}

/* v1.0.158 – stable split gallery: desktop reel + mobile native swipe + infinite mobile thumbs */
.hundello-breed-gallery-stage.is-mobile-ready{
  position:relative;
  overflow:hidden;
  touch-action:pan-y pinch-zoom;
}
.hundello-breed-gallery-mobile-track{
  position:absolute;
  inset:0;
  display:flex;
  width:300%;
  height:100%;
  transform:translate3d(-33.333333%,0,0);
  will-change:transform;
}
.hundello-breed-gallery-mobile-slide{
  flex:0 0 33.333333%;
  width:33.333333%;
  height:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(243,244,246,.95));
}
.hundello-breed-gallery-mobile-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
  backface-visibility:hidden;
}
.hundello-breed-gallery-stage.is-mobile-ready .hundello-breed-gallery-main[hidden]{
  display:none !important;
}
@media (max-width: 1024px), (hover: none), (pointer: coarse){
  .hundello-breed-gallery-thumbs.is-mobile-infinite{
    display:flex !important;
    overflow-x:auto;
    gap:10px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:auto;
    padding-bottom:2px;
    overscroll-behavior-x:contain;
  }
  .hundello-breed-gallery-thumbs.is-mobile-infinite::-webkit-scrollbar{display:none}
  .hundello-breed-gallery-thumbs.is-mobile-infinite .hundello-breed-gallery-thumb{
    flex:0 0 86px;
  }
}