/* ===================== THEME ===================== */
:root{
  --parallax-y: 0px;
  --bg:#f6f8fb;
  --bg-2:#E9D4BF;
  --surface:#fff;
  --panel:#fff;
  --text:#0f172a;
  --muted:#475569;
  --muted-2:#94a3b8;
  --accent:#f2c7a5;
  --accent-2:#efb88c;
  --accent-3:#e89a5b;
  --border:rgba(2,6,23,.08);
  --ring:0 0 0 4px rgba(232,154,91,.20);
  --radius:16px;
  --header-h:72px;

  --shadow-sm:0 1px 2px rgba(2,6,23,.06);
  --shadow-md:0 6px 18px rgba(2,6,23,.10), 0 2px 6px rgba(2,6,23,.06);
  --shadow-lg:0 16px 40px rgba(2,6,23,.12);

  --anim-in:cubic-bezier(.22,.61,.36,1);
  --anim-fast:.2s var(--anim-in);
  --anim-med:.35s var(--anim-in);
  --anim-slow:.6s var(--anim-in);
}

/* ===================== BASE ===================== */
*{ box-sizing:border-box }
html,body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, var(--bg-2) 100%);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; transition:color var(--anim-fast), opacity var(--anim-fast) }
a:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px }
img{ display:block; max-width:100%; height:auto }
.container{ max-width:1100px; margin-inline:auto; padding-inline:clamp(14px,4vw,24px) }

/* ===================== HEADER / NAV ===================== */
header{
  position:fixed; inset:0 0 auto 0; z-index:9999;
  backdrop-filter:saturate(1.25) blur(10px);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:backdrop-filter var(--anim-med), background var(--anim-med), box-shadow var(--anim-med), border-color var(--anim-med);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; transform:translateZ(0) }
.brand .logo{
  width:36px; height:36px; border-radius:10px;
  background:radial-gradient(circle at 30% 30%, var(--accent), var(--accent-2));
  display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-sm);
  transition:transform var(--anim-med), filter var(--anim-med);
}
.brand:hover .logo{ transform:rotate(6deg) scale(1.06); filter:brightness(1.03) }

.menu-wrap{ display:flex; align-items:center; gap:10px }
.menu{ display:flex; gap:18px; flex-wrap:wrap }
.menu a{
  padding:8px 12px; border-radius:10px; color:var(--muted); font-weight:600;
  transition:background var(--anim-fast), color var(--anim-fast), transform var(--anim-fast), box-shadow var(--anim-fast);
}
.menu a:hover, .menu a:focus-visible{
  color:var(--text); background:rgba(232,154,91,.12); box-shadow:var(--ring); transform:translateY(-1px);
}

/* CTA */
.cta{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; color:#fff; font-weight:800;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border:1px solid rgba(232,154,91,.28);
  box-shadow:var(--shadow-md);
  transition:transform var(--anim-fast), box-shadow var(--anim-fast), filter var(--anim-fast);
  will-change:transform;
}
.send{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; color:#fff; font-weight:800;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border:1px solid rgba(232,154,91,.28);
}
.cta:hover{ transform:translateY(-1px) scale(1.01); box-shadow:var(--shadow-lg); filter:saturate(1.05) }
.cta:focus-visible{ box-shadow:0 0 0 4px rgba(232,154,91,.25), 0 10px 24px rgba(2,6,23,.18) }
.cta:active{ transform:translateY(0) scale(.99) }
/* ripple */
.cta::after{
  content:''; position:absolute; inset:0; margin:auto; width:12px; height:12px; border-radius:999px;
  background:rgba(255,255,255,.45); transform:scale(0); opacity:0; pointer-events:none;
}
.cta:active::after{ animation:ripple .6s ease-out }
@keyframes ripple{ 0%{ transform:scale(0); opacity:.5 } 100%{ transform:scale(26); opacity:0 } }

/* Burger / Lang */
.hamburger{
  display:none; width:40px; height:40px; padding:0; border:1px solid var(--border);
  background:rgba(255,255,255,.6); color:var(--text); border-radius:10px; font-weight:800; line-height:1;
  align-items:center; justify-content:center; position:relative; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform var(--anim-fast), background var(--anim-fast)
}
.hamburger:active{ transform:scale(.98) }
.hamburger svg{ width:26px; height:26px; display:block }
.hamburger svg path{ stroke:currentColor }
.icon-close{ display:none }

.lang{
  display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:10px;
  border:1px solid var(--border); background:rgba(255,255,255,.6); color:var(--text); font-weight:800;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform var(--anim-fast), background var(--anim-fast), box-shadow var(--anim-fast);
}
.lang:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); background:rgba(255,255,255,.8) }
.lang:focus-visible{ box-shadow:var(--ring); outline:none }
.lang .flag svg{ width:20px; height:14px; border-radius:3px; box-shadow:0 0 0 1px var(--border) inset }

/* ===================== MOBILE MENU ===================== */
.mobile-menu{
  position:fixed; left:0; right:0; top:var(--header-h,72px);
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); display:none; z-index:9000; box-shadow:var(--shadow-md);
  transform-origin:top; transform:translateY(-8px) scale(.98); opacity:0;
  transition:transform var(--anim-med), opacity var(--anim-med);
}
.mobile-menu.open{ display:block; transform:none; opacity:1 }
.mobile-menu .inner{ max-width:1100px; margin:0 auto; padding:14px clamp(14px,4vw,24px) 18px; display:grid; gap:8px }
.mobile-menu a{ display:block; padding:12px 14px; border-radius:12px; color:var(--text); background:rgba(15,23,42,.04); transition:transform var(--anim-fast), background var(--anim-fast) }
.mobile-menu a:active{ transform:translateY(1px) }
.mobile-lang{ display:flex; gap:8px }

/* ===================== HERO ===================== */
.hero{ padding:72px 0 40px; position:relative; overflow:hidden; isolation:isolate }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center }
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px solid #b88a4a; color:#3b2a0f; background:#ffffff;
  border-radius:999px; font-weight:700; box-shadow:var(--shadow-sm);
}
.h1{ font-size:clamp(28px,4vw,48px); line-height:1.05; margin:14px 0 10px; letter-spacing:-.02em }
.lead{ color:var(--muted); font-size:clamp(16px,1.6vw,18px) }
.hero-card{
  background:radial-gradient(1200px 400px at 20% -10%, rgba(232,154,91,.18), transparent 60%), var(--panel);
  border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-md);
  transition:transform var(--anim-slow), box-shadow var(--anim-med);
}
.hero-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg) }
.hero-card img{ border-radius:14px; aspect-ratio:4/3; object-fit:cover; transform:translateZ(0); transition:transform var(--anim-slow) }
.hero-card:hover img{ transform:scale(1.02) }

/* Parallax tła */
.parallax-hero.hero-theme-sunset::before{
  content:""; position:absolute; inset:-15% -10%; z-index:-2; border-radius:0 0 40% 40% / 0 0 24% 24%;
  background:
          radial-gradient(1200px 500px at 15% -10%, rgba(232,154,91,.25), transparent 60%),
          radial-gradient(900px 500px at 95% -10%, rgba(242,199,165,.3), transparent 65%),
          linear-gradient(180deg, rgba(246,248,251,1) 0%, rgba(246,248,251,1) 60%, rgba(232,154,91,.35) 100%);
  transform:translateY(var(--parallax-y,0px)); will-change:transform;
}

/* ===================== SECTION BASES ===================== */
section{ padding:64px 0; scroll-margin-top:100px }
.section-title{ font-size:clamp(22px,3vw,32px); margin:0 0 24px }

/* ===================== CARDS (GENERIC) ===================== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; perspective:900px }
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform var(--anim-med), box-shadow var(--anim-med), border-color var(--anim-med);
  transform-style:preserve-3d;
}
.card:hover:not(.puppy-card){
  transform:translateY(-4px) rotateX(2deg) rotateY(-2deg);
  box-shadow:var(--shadow-md);
  border-color:rgba(232,154,91,.25);
}
.card img{ aspect-ratio:4/3; object-fit:cover; transform:translateZ(0); transition:transform var(--anim-med), filter var(--anim-med) }
.card:hover:not(.puppy-card) img{ transform:scale(1.03); filter:contrast(1.02) saturate(1.02) }
.card .p{ padding:16px }
.pill{ display:inline-block; font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:var(--muted-2) }

/* ===================== GALLERY GRID ===================== */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px }
.gallery a{
  border-radius:12px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm); background:#fff;
  transition:transform var(--anim-med), box-shadow var(--anim-med), border-color var(--anim-med);
}
.gallery a:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(232,154,91,.22) }
.gallery img{ aspect-ratio:1/1; object-fit:cover; width:100%; height:100%; transition:transform .25s var(--anim-in) }
.gallery a:hover img{ transform:scale(1.03) }

/* ===================== FEATURES / OPINIONS ===================== */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.feature{
  background:var(--panel); border:1px solid var(--border); padding:18px; border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition:transform var(--anim-med), box-shadow var(--anim-med), border-color var(--anim-med); transform-style:preserve-3d;
}
.feature:hover{ transform:translateY(-3px) rotateX(1deg); box-shadow:var(--shadow-md); border-color:rgba(232,154,91,.22) }
.feature .n{ font-size:28px; font-weight:800; color:var(--accent) }

.opinions{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.op{
  background:var(--panel); border:1px solid var(--border); padding:18px; border-radius:var(--radius); color:var(--muted); box-shadow:var(--shadow-sm);
  transition:transform var(--anim-med), box-shadow var(--anim-med), border-color var(--anim-med);
}
.op:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(232,154,91,.18) }
.op .who{ color:var(--text); font-weight:700; margin-top:8px }

/* ===================== CONTACT / FORM ===================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm);
  transition:transform var(--anim-med), box-shadow var(--anim-med), border-color var(--anim-med);
}
.panel:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(232,154,91,.16) }

.list{ margin:0; padding:0; list-style:none; display:grid; gap:6px; overflow-wrap:anywhere; word-break:break-word }
.list li{ display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap }
.list b{ min-width:110px; color:var(--muted); font-weight:600 }

form input, form textarea{
  max-width:100%; width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--text); outline:none; box-shadow:var(--shadow-sm);
  transition:box-shadow var(--anim-fast), border-color var(--anim-fast), transform var(--anim-fast);
}
form input:focus, form textarea:focus{ box-shadow:var(--ring); border-color:rgba(232,154,91,.35); transform:translateY(-1px) }

/* ===================== FOOTER ===================== */
footer{ padding:26px 0 60px; color:var(--muted); text-align:center }

/* ===================== ANIMATIONS: ON LOAD ===================== */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px) scale(.98) } to{ opacity:1; transform:none } }
.hero .badge, .hero .h1, .hero .lead, .hero .cta{ animation:fadeUp var(--anim-slow) both }
.hero .h1{ animation-delay:.06s } .hero .lead{ animation-delay:.12s } .hero .cta{ animation-delay:.18s }

section .section-title{ animation:fadeUp var(--anim-slow) both }
.cards .card:nth-child(1){ animation:fadeUp var(--anim-slow) .03s both }
.cards .card:nth-child(2){ animation:fadeUp var(--anim-slow) .09s both }
.cards .card:nth-child(3){ animation:fadeUp var(--anim-slow) .15s both }

.features .feature:nth-child(1){ animation:fadeUp var(--anim-slow) .03s both }
.features .feature:nth-child(2){ animation:fadeUp var(--anim-slow) .09s both }
.features .feature:nth-child(3){ animation:fadeUp var(--anim-slow) .15s both }

.gallery a:nth-child(odd){ animation:fadeUp var(--anim-slow) .05s both }
.gallery a:nth-child(even){ animation:fadeUp var(--anim-slow) .1s both }

.opinions .op:nth-child(1){ animation:fadeUp var(--anim-slow) .03s both }
.opinions .op:nth-child(2){ animation:fadeUp var(--anim-slow) .09s both }
.opinions .op:nth-child(3){ animation:fadeUp var(--anim-slow) .15s both }

.contact-grid .panel:nth-child(1){ animation:fadeUp var(--anim-slow) .05s both }
.contact-grid .panel:nth-child(2){ animation:fadeUp var(--anim-slow) .12s both }

/* ===================== SNAP-IN (CSS-only) ===================== */
.snap{ opacity:0; transform:translateY(8px) scale(.992); filter:blur(2px) }
@media (prefers-reduced-motion:reduce){ .snap{ opacity:1; transform:none; filter:none } }

/* ===================== LIGHTBOX (dialog) ===================== */
dialog.lb{
  padding:0; border:none; background:transparent;
}
dialog.lb::backdrop{
  backdrop-filter:blur(8px) saturate(1.05);
  background:rgba(15,23,42,.35);
  transition:backdrop-filter .25s ease, background .25s ease;
}
html.lb-open{ overflow:hidden }
dialog.lb img{
  max-width: min(92vw, 1200px);
  max-height: 85vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Fallback – lekkie rozmycie całej strony */
html.lb-open body > *:not(dialog){
  filter:blur(8px) saturate(1.05);
  transition:filter .25s ease;
}

/* ===================== HERO MOBILE ORDER ===================== */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:18px }
  .hero-grid > :first-child{ order:1 }
  .hero-card{ order:2; margin-top:6px }
  .hero .cta{ margin-bottom:4px }
}
@media (max-width:768px){ .hero-grid{ grid-template-columns:1fr } }

/* ===================== RESPONSIVE GRIDS ===================== */
@media (max-width:900px){
  .cards, .features, .opinions, .contact-grid{ grid-template-columns:1fr }
  .gallery{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:520px){
  .menu{ display:none }
  .hamburger{ display:flex; z-index:10001 }
  .gallery{ grid-template-columns:repeat(2,1fr) }
  .contact-grid{ grid-template-columns:1fr }
  .mobile-lang{ margin-top:8px }
}

/* ===================== HELPERS ===================== */
.panel{ max-width:100% }
.stack{ display:flex; flex-wrap:wrap; align-items:center; gap:12px }
@media (max-width:520px){
  .stack{ flex-direction:column; align-items:flex-start }
  .cta{ width:fit-content }
}
.hero .h1::selection, .hero .lead::selection{ background:rgba(232,154,91,.18) }
img{ cursor:zoom-in }
.no-lightbox img{ cursor:auto }

/* ===================== PUPPIES: META, STATUS ===================== */
.puppy-card .p{ padding:16px }
.puppy-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px }
.puppy-name{ font-weight:800 }

/* status pills */
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
}
.status-available{ color:#166534; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25) }
.status-reserved{  color:#7c2d12; background:rgba(251,146,60,.15); border-color:rgba(251,146,60,.28) }
.status-sold{      color:#1f2937; background:rgba(148,163,184,.18); border-color:rgba(148,163,184,.28) }

/* ===================== PUPPIES: MINI-CAROUSEL ===================== */
.puppy-slider{
  position:relative;
  padding:8px;
  background:var(--panel);
  border-radius:calc(var(--radius) - 2px);
  overflow:hidden;
  touch-action: pan-y;            /* ważne dla drag + scroll */
}
.puppy-img{
  aspect-ratio:4/3; object-fit:cover;
  border-radius:12px;
  user-select:none; -webkit-user-drag:none;
}
.puppy-prev, .puppy-next{
  position:absolute; top:50%; transform:translateY(-50%);
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  color:var(--text); font-size:20px; font-weight:800;
  box-shadow:var(--shadow-sm); cursor:pointer; z-index:2;
}
.puppy-prev{ left:12px }
.puppy-next{ right:12px }
.puppy-prev:hover, .puppy-next:hover{ filter:saturate(1.05); box-shadow:var(--shadow-md) }
.puppy-dots{
  position:absolute; left:0; right:0; bottom:8px;
  display:flex; justify-content:center; gap:6px;
}
.puppy-dot{
  width:8px; height:8px; border-radius:999px; border:none;
  background:rgba(15,23,42,.25); box-shadow:var(--shadow-sm); cursor:pointer;
}
.puppy-dot.active{ background:rgba(232,154,91,.95) }
.puppy-slider .puppy-link{ cursor: grab; }
.puppy-slider.dragging .puppy-link{ cursor: grabbing; }

/* ===================== O RASIE (styling) ===================== */
#orasie { position: relative; }
#orasie .panel{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
#orasie .section-title{ margin-bottom: 18px; }
#orasie .cards{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: none;
}
#orasie .card{
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--panel); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--anim-fast), transform var(--anim-fast), border-color var(--anim-fast);
}
#orasie .card:hover{
  transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(232,154,91,.22);
}
#orasie .card .p{ padding: 16px 16px 14px; }
#orasie .pill{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: .3px; text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(232,154,91,.25); background: rgba(232,154,91,.10);
}
#orasie .card h3{ margin: 10px 0 8px; font-size: 18px; line-height: 1.25; }
#orasie .list{ margin:0; padding:0; list-style:none; display:grid; gap:8px }
#orasie .list li{
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
}
#orasie .list b{ min-width: 92px; color: var(--muted); font-weight: 600; }
#orasie .list li:not(:has(b)) {
  grid-template-columns: 1fr; position: relative; padding-left: 20px;
}
#orasie .list li:not(:has(b))::before{
  content: ""; position: absolute; left: 4px; top: .6em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-3); box-shadow: 0 0 0 2px rgba(232,154,91,.15);
}

/* FAQ details */
#orasie details{ border-top: 1px solid var(--border); padding: 10px 0; }
#orasie details:first-of-type{ border-top: none; padding-top: 0; }
#orasie summary{
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px; border-radius: 10px; transition: background var(--anim-fast);
}
#orasie summary::-webkit-details-marker{ display:none; }
#orasie summary:hover{ background: rgba(15,23,42,.04); }
#orasie summary::before{
  content: "▸"; font-size: 14px; transform: translateY(1px); transition: transform var(--anim-fast); color: var(--muted);
}
#orasie details[open] summary::before{ transform: rotate(90deg); }
#orasie details p{ margin: 6px 0 4px; color: var(--muted); }

/* Specs grid */
#orasie .breed-specs { margin-top: 18px; }
#orasie .breed-specs .note{ margin-top: 10px; color: var(--muted); font-size: 14px; }
#orasie .spec-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; margin: 0;
}
#orasie .spec-grid > div{
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  padding: 12px 14px; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--anim-fast), transform var(--anim-fast), border-color var(--anim-fast);
}
#orasie .spec-grid > div:hover{
  transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(232,154,91,.18);
}
#orasie .spec-grid dt{
  font-size: 12px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted); margin: 0 0 6px;
}
#orasie .spec-grid dd{ margin:0; color: var(--text); font-weight: 600; line-height: 1.5; }

/* Responsive */
@media (max-width: 1024px){
  #orasie .cards{ grid-template-columns: repeat(2, 1fr); }
  #orasie .spec-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  #orasie .cards{ grid-template-columns: 1fr; }
  #orasie .list b{ min-width: 80px; }
  #orasie summary{ padding: 10px 0; }
  #orasie .spec-grid{ grid-template-columns: 1fr; }
}

/* Mobile accordion variant */
@media (max-width: 640px){
  #orasie .cards{ grid-template-columns: 1fr !important; }
  #orasie .cards.is-accordion .card{ border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  #orasie .cards.is-accordion .card .p{ padding: 0; }
  #orasie .breed-acc{ border: 0; }
  #orasie .breed-acc > summary{
    display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; list-style:none;
    background:var(--panel); border-bottom:1px solid var(--border);
  }
  #orasie .breed-acc > summary::-webkit-details-marker{ display:none; }
  #orasie .breed-acc > summary::after{
    content:"▾"; margin-left:auto; transform:rotate(-90deg); transition:transform var(--anim-fast); color:var(--muted);
  }
  #orasie .breed-acc[open] > summary::after{ transform:rotate(0deg); }
  #orasie .breed-acc .acc-title{ font-weight:800; line-height:1.2; }
  #orasie .breed-acc .pill{ border:1px solid rgba(232,154,91,.25); background:rgba(232,154,91,.10); }
  #orasie .breed-acc .acc-body{ padding:12px 16px 14px; background:var(--panel); }
  #orasie .breed-acc .list{ display:grid; gap:8px; }
  #orasie .breed-acc .list li{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; }
  #orasie .breed-acc .list b{ min-width:120px; color:var(--muted); font-weight:600; }
  #orasie .breed-acc .acc-body > .list + .list{
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(2,6,23,.08);
  }
}

/* ===================== Flags (języki) ===================== */
.lang-flags{ display:flex; gap:8px; align-items:center; }
.lang-flags .flag-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:24px; padding:0; border:1px solid var(--border, #e5e5e5);
  border-radius:6px; background:#fff; cursor:pointer; overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.lang-flags .flag-btn:hover{ transform: translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.08); }
.lang-flags .flag-btn:active{ transform: translateY(0); }
.lang-flags .flag-btn svg{ width:100%; height:100%; display:block; }
.lang-flags .flag-btn.active{
  outline:2px solid var(--accent-2, #e89a5b); outline-offset:2px; border-color:transparent;
}

/* ===================== Dropdown (jeśli używasz) ===================== */
.lang-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  min-width:140px; padding:6px; background:var(--surface, #fff);
  border:1px solid var(--border, rgba(0,0,0,.12));
  border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.12); z-index:9999;
}
.lang-menu.open{ display:block; }
.lang-menu li{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.lang-menu li:hover, .lang-menu li[aria-selected="true"]{ background: rgba(0,0,0,.06); }

/* Ważne: dropdown/flag nie może być ucinany */
header .menu, .nav .menu, .menu-wrap, header, .nav { overflow: visible !important; }



/* Blokuj rozciąganie przycisku w flex-rzędzie */
.stack .cta{
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;      /* ripple nie wychodzi poza przycisk */
  line-height: 1;        /* stabilna wysokość */
}

/* Nie pozwól, żeby komunikaty spychały przycisk */
.stack .form-msg{
  flex: 1 1 auto;
  min-width: 0;          /* zapobiega poszerzaniu rzędu */
  display: inline-block; /* niech zajmuje tylko potrzebne miejsce */
}

/* Opcjonalnie – minimalnie spokojniejsze animacje przycisku */
.cta:hover{ transform: translateY(-1px); }     /* bez scale(1.01) */
.cta:active{ transform: translateY(0); }

/* Ripple bez wpływu na layout (już jest absolute), ale na wszelki wypadek: */
.cta{ position: relative; }
.cta::after{ pointer-events: none; }