/* =============================
   Gunbil German Shepherds — CSS (cleaned)
   Site: https://germanshepherdpuppies.com/
   Theme: Dark, responsive nav, overlay/tap submenus <=1024px
   Notes: removed non‑CSS markup, deduped selectors, fixed typos.
   ============================= */

/* Color Palette Example ("var(--bg)")
-----------------------------------
--bg           #0b0d10   | Dark Charcoal (almost black)
--panel        #12161b   | Dark Gunmetal
--text         #e8edf2   | Alice Blue / Light Grayish Blue
--muted        #a8b3bf   | Cadet Gray
--brand        #ff4d01   | Vivid Orange
--brand-2      #ffffff   | Pure White
--border       #1f2630   | Gunmetal
--accent-green #87d68d   | Light / Pastel Green
--red-cautious #FF0000   | Red, Cautious
----------------------------------- */

/* Root theme vars */
:root{
  --bg:#0b0d10;
  --panel:#12161b;
  --text:#e8edf2;
  --muted:#a8b3bf;
  --brand:#ff4d01;
  --brand-2:#fff;
  --border:#1f2630;
  --viewer-max-w:1090px;
  --viewer-max-h:744px;
  --accent-green:#87d68d; /* shared green for tips/badges */
}

/* Base */
[data-theme="dark"] body{
  background:var(--bg);
  color:var(--text);
  font-family:Montserrat,system-ui,sans-serif;
  line-height:1.6;
}
a{ color:var(--brand); }
a:hover{ color:var(--brand-2); }

/* Skip link */
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{
  left:8px; top:8px; background:var(--brand); color:#06243a;
  padding:.6rem .8rem; border-radius:.6rem; z-index:1000;
}

/* Nav bar (desktop defaults) */
.main-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:relative; padding:.75rem 1rem;
  background:rgba(11,13,16,.85);
  border-bottom:1px solid var(--border);
  overflow:visible; z-index:50;
}
.nav-list{
  list-style:none; display:flex; gap:.8rem; margin:0; padding:0; align-items:center;
}
.nav-list a{
  padding:.5rem .8rem; border-radius:.6rem; color:var(--text); text-decoration:none;
}
.nav-list a:hover, .nav-list a[aria-current="page"]{ background:var(--panel); }
.nav-list a[aria-current="page"]{ color:var(--brand); font-weight:700; }
.nav-list a:hover{ color:#F08209; transition:color .3s ease, border-color .3s ease; }

/* Dropdown (desktop) */
.has-submenu{ position:relative; display:flex; align-items:center; gap:.25rem; }
.submenu-toggle{ display:none; }
.sub-menu{
  list-style:none; margin:0; padding:.5rem; background:var(--panel);
  border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.sub-menu li a{ display:block; color:var(--text); text-decoration:none; padding:.5rem .6rem; border-radius:8px; }
.sub-menu li a:hover{ background:rgba(255,255,255,.06); }

/* Desktop hover dropdown only */
@media (min-width:769px){
  .has-submenu .sub-menu{
    position:absolute; top:calc(100% + 8px); left:0; min-width:220px; max-width:320px; white-space:nowrap;
    opacity:0; visibility:hidden; transform:translateY(-5px);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    display:block; pointer-events:none;
  }
  .has-submenu:hover .sub-menu,
  .has-submenu:focus-within .sub-menu{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .25s ease, transform .25s ease, visibility 0s; pointer-events:auto;
  }
  .has-submenu > .parent-link{
    position:relative; padding-right:1.4rem; white-space:nowrap;
  }
  .has-submenu > .parent-link::after{
    content:""; position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
    border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--text);
    opacity:.85; transition:transform .25s ease;
  }
  .has-submenu:hover > .parent-link::after{ transform:translateY(-50%) rotate(180deg); }
  .has-submenu::after{ content:""; position:absolute; left:0; right:0; top:100%; height:10px; }
}

/* Parent highlight */
.nav-list a[aria-current="page"].parent-link{ color:#ff4d01; font-weight:700; }

/* Utilities */
.orange-text{ color:#ff4d01; text-decoration:underline; font-weight:600; }
.text-orange{ color:var(--brand) !important; }
.text-orange-14px{ color:var(--brand) !important; font-size:.875rem; line-height:1.45; } /* fixed to true ~14px */
.text-orange-13px{ color:var(--brand) !important; font-size:.8125rem; line-height:1.45; }
.text-orange-13px-bold{ color:var(--brand) !important; font-size:.8125rem; line-height:1.45; font-weight:700; }
.hover-text-orange:hover{ color:var(--brand) !important; }
.border-orange{ border-color:var(--brand) !important; }
.bg-orange{ background:var(--brand) !important; color:#06243a !important; }
.text-green{ color:#87d68d; }

/* Menu toggle base */
.menu-toggle{
  display:none; background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:.6rem; padding:.45rem .6rem;
}
.menu-toggle svg{ width:28px; height:28px; display:block; }
.menu-toggle svg path{ fill:currentColor; }

/* Hero intro text */
.site-header p.intro-text{
  max-width:800px; margin:1rem auto 0; font-size:1.05rem; line-height:1.6; color:var(--muted); text-align:center;
}
@media (max-width:768px){
  .site-header p.intro-text{ font-size:1rem; padding:0 1rem; }
}

/* Hero */
.hero{ padding:0; margin:0; }
.hero img {
  max-width:1920px; /* cap hero width */
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:0;
  object-fit:cover;
  object-position:center;
}

/* Sections */
.section{ padding:2rem 1rem; }

/* Grid & cards */
.puppy-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.puppy-card{ grid-column:span 6; background:var(--panel); border:1px solid var(--border); border-radius:1rem; padding:1rem; }
.puppy-card img{ width:100%; border-radius:.8rem; margin-bottom:.6rem; }
@media (max-width:800px){ .puppy-card{ grid-column:span 12; } }
.content-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.content-card{ grid-column:span 6; background:var(--panel); border:1px solid var(--border); border-radius:1rem; padding:1rem; }
.content-card img{ width:100%; border-radius:.8rem; margin-bottom:.6rem; }

/* CTA */
.cta{
  display:inline-block; margin-top:.5rem; background:#ff4d04; color:#000;
  padding:.55rem .9rem; border-radius:.7rem; text-decoration:none;
}
.cta:hover{ background-color:#F08209; }

/* Footer */
.site-footer{ border-top:1px solid var(--border); padding:2rem 1rem; text-align:center; color:var(--muted); }

/* Headings */
header.site-header{ display:grid; place-items:center; text-align:center; padding:1rem 0; }
header.site-header h1, header.site-header p{ margin:.5rem 0; }
h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat',sans-serif; color:var(--brand);
  margin-top:1.5rem; margin-bottom:.5rem; font-weight:600; text-align:center;
}
h1{ font-size:2.5rem; } h2{ font-size:2rem; } h3{ font-size:1.5rem; }
h1:hover, h2:hover, h3:hover{ color:var(--brand-2); transition:color .3s ease; }

/* Sorry Sold Button */
.more-info-btn-red{
  background-color:red; color:white; padding:.4rem .8rem; border-radius:.5rem; font-weight:bold; font-size:.9rem; display:inline-block; text-decoration:none;
}
.more-info-btn-red:hover{ background-color:darkred; }

/* Make it not clickable */
.no-click{ pointer-events:none; cursor:default; }

/* Primary purchase button + training row */
.puppy-training{ display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; }
.more-info-btn{
  background-color:var(--brand); color:#000; padding:.4rem .8rem; border-radius:.5rem; font-weight:700; text-decoration:none; font-size:.9rem;
  transition:background-color .3s ease, color .3s ease;
}
.more-info-btn:hover{ background-color:var(--brand-2); color:var(--bg); }

/* Litter dam/sire */
.litter-images{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:.75rem;
}
.image-holder{
  width:100%; max-width:545px; aspect-ratio:545 / 372;
  background-color:#1f2630; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:.5rem; border:1px solid var(--border);
}
.image-holder img{ width:100%; height:100%; object-fit:cover; }

/* ===== Mobile & Tablet Navigation (<=1024px) ===== */
@media (max-width:1024px){
  .main-nav{
    position:sticky; top:0; z-index:5000; min-height:60px;
    background:rgba(11,13,16,.95);
    backdrop-filter:saturate(140%) blur(6px);
    -webkit-backdrop-filter:saturate(140%) blur(6px);
  }

  #nav-list a,
  #nav-list .sub-menu a{
    border-radius:8px;
    transition:background-color .15s ease, color .15s ease;
  }
  #nav-list a:hover,
  #nav-list a:focus,
  #nav-list a:active,
  #nav-list a.touch-hover{
    background:rgba(255,255,255,.08); color:#fff;
  }
  #nav-list .has-submenu.open > .parent-link{
    background:rgba(255,255,255,.12); color:#fff;
  }

  #menu-toggle, .menu-toggle{
    display:flex !important; align-items:center; justify-content:center;
    width:44px; height:44px; font-size:28px; background:transparent; color:#fff; border:none; border-radius:8px; cursor:pointer;
    position:relative; z-index:5100;
  }
  #menu-toggle svg, .menu-toggle svg{ width:28px; height:28px; display:block; }
  #menu-toggle svg path, .menu-toggle svg path{ fill:currentColor !important; }

  #nav-list.nav-list{
    position:fixed; top:calc(60px + env(safe-area-inset-top));
    left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right));
    z-index:5050; background:rgba(20,20,20,.98); border:1px solid rgba(255,255,255,.08); border-radius:12px;
    padding:16px; display:none; flex-direction:column; gap:12px;
    max-height:calc(100dvh - 60px - env(safe-area-inset-top) - 16px); overflow:auto;
  }
  #nav-list.show{ display:flex; }

  #nav-list .has-submenu > .sub-menu{
    position:static !important; display:none !important;
    opacity:1 !important; visibility:visible !important; transform:none !important; pointer-events:auto !important;
    white-space:normal !important;
    background:rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:10px !important;
    padding:6px !important; margin:6px 0 0 0 !important;
    box-shadow:none !important;
  }
  #nav-list .has-submenu.open > .sub-menu{ display:block !important; }

  #nav-list .has-submenu > .parent-link{ position:relative; padding-right:1.6rem; }
  #nav-list .has-submenu > .parent-link::after{
    content:""; position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
    width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid #e8edf2; opacity:.9;
  }
  #nav-list .has-submenu.open > .parent-link::after{ transform:translateY(-50%) rotate(180deg); }

  #nav-list a{ color:#e8edf2 !important; }
  #nav-list .sub-menu a{ display:block; padding:10px 12px 10px 22px; border-radius:8px; }
  #nav-list .sub-menu a:hover{ background:rgba(255,255,255,.08) !important; }
}

/* Hero & litter responsive */
@media (max-width:768px){
  .hero img{ height:auto; max-height:70vh; object-fit:contain; }
  .litter-images{ display:block !important; }
  .litter-card{ width:100% !important; max-width:none !important; margin:0 0 1rem 0 !important; }
  .image-holder{ width:100% !important; max-width:none !important; aspect-ratio:auto; }
  .image-holder img{ width:100% !important; height:auto !important; object-fit:contain; background:#1f2630; }
}
@media (max-width:1024px) and (orientation:landscape){
  .hero img{ height:auto; max-height:55vh; object-fit:contain; }
  .litter-images{ display:block !important; }
}
@media (max-height:450px){
  .hero img{ height:auto; max-height:50vh; object-fit:contain; }
}

/* Accessibility */
.nav-list a:focus-visible{ outline:2px solid #ff4d01; outline-offset:2px; border-radius:8px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ===== Legacy Lightbox ===== */
.lb[hidden]{ display:none !important; }
.lb{
  position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.92);
  display:grid; grid-template-areas:"prev stage next"; grid-template-columns:56px 1fr 56px; align-items:center; touch-action:none;
}
.lb-stage{ grid-area:stage; display:grid; place-items:center; height:100%; }
#lb-img{ max-width:100vw; max-height:100vh; transform:rotate(var(--deg,0deg)) scale(var(--scale,1)); transition:transform .15s ease; will-change:transform; touch-action:none; }
.lb-btn,.lb-tool{ -webkit-tap-highlight-color:transparent; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:10px; cursor:pointer; }
.lb-btn{ position:absolute; width:44px; height:44px; display:grid; place-items:center; font-size:22px; }
.lb-close{ top:12px; right:12px; }
.lb-prev{ left:8px; font-size:28px; }
.lb-next{ right:8px; font-size:28px; }
.lb-toolbar{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:8px; padding:6px; background:rgba(20,20,20,.5); border:1px solid rgba(255,255,255,.12); border-radius:12px;
}
.lb-tool{ padding:8px 10px; font-size:18px; }
@media (max-width:768px){ .lb{ grid-template-columns:40px 1fr 40px; } .lb-btn{ width:40px; height:40px; } }

/* === Inline photo carousel === */
.photo-carousel{ padding-top:1rem; }
.pc-wrap{ position:relative; border:1px solid var(--border); border-radius:12px; background:var(--panel); overflow:hidden; }
.pc-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-snap-stop:always; overscroll-behavior-x:contain;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
.pc-track::-webkit-scrollbar{ height:8px; }
.pc-track::-webkit-scrollbar-thumb{
  background:var(--brand);
  border-radius:8px;
}
.pc-prev{ left:14px; } .pc-next{ right:14px; }
.pc-btn:hover{ background:rgba(0,0,0,.6); }
@media (min-width:1024px){ .pc-btn{ width:64px; height:64px; font-size:38px; } }
.pc-thumbs{ display:flex; gap:.6rem; margin-top:.6rem; overflow-x:auto; padding-bottom:.25rem; }
.pc-thumb{ background:transparent; border:1px solid var(--border); border-radius:10px; padding:4px; cursor:pointer; }
.pc-thumb[aria-selected="true"]{ outline:2px solid var(--brand); }
.pc-thumb img{ display:block; width:160px; height:auto; border-radius:8px; }
@media (max-width:480px){ .pc-btn{ display:grid !important; } }

/* === Simple image viewer === */
.img-viewer[hidden]{ display:none !important; }
.img-viewer{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:rgba(0,0,0,.9);
}
.img-viewer__img{
  width:min(var(--viewer-max-w),95vw); max-height:min(var(--viewer-max-h),90vh);
  height:auto; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.img-viewer__close{
  position:absolute; top:12px; right:12px; width:44px; height:44px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:10px; cursor:pointer;
}

/* === Price & Availability === */
.dog-price{ padding:0 0 1rem; }
.dog-price h2{ margin-top:0; }
.price-card{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.75rem; max-width:clamp(320px, 92vw, 760px); margin-inline:auto; }
.price-about{ margin-bottom:.75rem; color:var(--muted); }
.price-card h3{ margin:.25rem 0 .5rem; font-size:1.15rem; }
.price-main{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:baseline; margin-bottom:.25rem; }
.price-amount{ font-size:2rem; line-height:1; font-weight:700; color:#87d68d; }
.price-currency{ opacity:.9; }
.price-status{ color:#87d68d; font-weight:600; }
.price-note{ margin:.25rem 0 .6rem; color:var(--muted); }
.price-includes{ margin:0; padding-left:1.1rem; }
.price-includes li{ margin:.25rem 0; }
.btn-purchase{
  background:#87d68d; color:#06243a; font-weight:700; padding:.65rem 1rem; border-radius:.7rem; text-decoration:none; display:inline-block;
  border:1px solid rgba(0,0,0,.25); box-shadow:0 6px 14px rgba(34,197,94,.25);
  transition:transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.btn-purchase:hover{ transform:translateY(-1px); background:#fff; color:#031a25; box-shadow:0 10px 18px rgba(34,197,94,.32); }
.btn-purchase:active{ transform:translateY(0); }
.btn-purchase:focus-visible{ outline:2px solid #9be0a0; outline-offset:2px; }

/* Key–value aligned list */
.kv{
  display:grid; grid-template-columns:200px 1fr; column-gap:1.2rem; row-gap:.35rem; margin:.75rem 0 0;
}
.kv dt{
  grid-column:1; margin:0; color:var(--brand) !important; font-weight:700; text-align:left; font-size:.8125rem; line-height:1.45;
}
.kv dd{ grid-column:2; margin:0; }

/* Make just this label green - same green as price/status */
.kv dt.text-green{ color:#87d68d !important; }

/* Mobile label spacing */
@media (max-width:600px){
  .kv{ grid-template-columns:150px 1fr !important; column-gap:1rem !important; }
  .kv dt{ text-align:left !important; margin-top:0 !important; white-space:normal; word-break:break-word; }
  .kv dd{ margin:0; }
}
@media (max-width:400px){
  .kv{ grid-template-columns:120px 1fr !important; column-gap:.75rem !important; }
}

/* Phone icon in kv */
.kv dt.has-phone-icon,
.kv dd.has-phone-icon{
  display:flex; align-items:center; gap:.4rem;
}
.kv dt.has-phone-icon::before,
.kv dd.has-phone-icon::before{
  content:""; width:16px; height:16px; background:url("/images/phone-icon.png") no-repeat center; background-size:contain;
  filter:brightness(0) invert(1);
}

/* Arrow separators between price items */
.price-main > * + *{ position:relative; padding-left:.6rem; margin-left:.6rem; }
.price-main > * + *::before{ content:"›"; position:absolute; left:0; color:var(--muted); font-size:1.1em; }

/* Phone: smaller price + full-width CTA inside card */
@media (max-width:540px){
  .price-card{ overflow:hidden; }
  .kv dd .price-amount{ font-size:1.45rem; line-height:1.1; white-space:nowrap; }
  .kv dd .price-status{ font-size:.9rem; white-space:nowrap; }
  .btn-purchase{ font-size:.9rem; padding:.45rem .7rem; border-radius:.55rem; line-height:1.25; max-width:100%; white-space:normal; }
}
@media (max-width:600px){
  .price-card .kv dd:last-of-type{ grid-column:1 / -1; }
  .price-card{ overflow:hidden; }
  .price-card .kv dd:last-of-type .btn-purchase{
    display:block; width:100%; box-sizing:border-box; text-align:center; padding:.6rem 1rem; border-radius:.6rem; white-space:normal; line-height:1.25;
  }
}

/* Force active item to be ORANGE + bold on mobile/tablet too */
@media (max-width:1024px){
  #nav-list a[aria-current="page"],
  #nav-list a[aria-current="page"]:visited,
  #nav-list .has-submenu.current-parent > .parent-link{
    color:var(--brand) !important; font-weight:700 !important;
  }
}
/* NAV POLISH (mobile overlay, active state) */
.nav-list a[aria-current="page"],
#nav-list .current-parent > .parent-link{
  color:var(--brand,#ff4d01) !important;
  font-weight:700 !important;
}

/* tiny fallback so hamburger never flashes white on load */
.menu-toggle{ appearance:none; -webkit-appearance:none; background:transparent; border:0; color:#e8edf2; }

/* ===== Sticky CTA ===== */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:6000;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
  padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,13,16,.98);
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
}
.sticky-cta__title,.sticky-cta__price{ font-weight:700; }
.sticky-cta__status{ opacity:.9; margin-left:6px; }
.sticky-cta__btn{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:#e8edf2;
  text-decoration:none; border-radius:10px;
  padding:9px 12px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.sticky-cta__btn:hover{ background:rgba(255,255,255,.12); }
@media (max-width:540px){ .sticky-cta__title{ display:none; } }
body.has-sticky-cta{ padding-bottom:70px; }

/* ===== Expanded Profile (XP) ===== */
.xp{ margin:0; }
.xp-card{ border:1px solid var(--border, rgba(255,255,255,.1)); background:rgba(255,255,255,.03); border-radius:12px; padding:16px; }
.xp h2{ margin:0 0 .5rem 0; }
.xp-intro{ color:var(--muted, #a7b0c0); margin:0 0 .75rem 0; }
.xp-toggle{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#e8edf2;
  border-radius:10px; padding:.6rem .9rem; font-weight:600;
  display:block; margin:.5rem auto 0; /* centered */
}
.xp-toggle:hover{ background:rgba(255,255,255,.12); }
.xp-body[hidden]{ display:none !important; }
.xp-grid{ display:grid; gap:16px; margin-top:14px; }
@media (min-width:900px){ .xp-grid{ grid-template-columns:1fr 1fr; } }
.xp-col{ border:1px solid var(--border, rgba(255,255,255,.08)); border-radius:10px; padding:12px; background:rgba(0,0,0,.15); }
.xp-col h3{ margin:.2rem 0 .5rem 0; font-size:1.05rem; }
.xp-col ul{ margin:0; padding-left:1.1rem; }
.xp-col li{ margin:.35rem 0; }

/* Card media helper */
.card-media{ aspect-ratio:4 / 3; overflow:hidden; border-radius:.8rem; display:block; }
.card-media > img{ width:100%; height:100% !important; object-fit:cover; object-position:center 20%; }

/* ---------- Global Puppy Backdrop ---------- */
html, body{ background:#0b0d10; }
.site-backdrop{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(0,0,0,.55), rgba(0,0,0,.85)),
    url("/images/puppies-backdrop.jpg") center/cover no-repeat;
  mix-blend-mode:normal; opacity:.6; will-change:transform;
}
@media (max-width:640px){
  .site-backdrop{
    background:
      radial-gradient(900px 450px at 50% 0%, rgba(0,0,0,.5), rgba(0,0,0,.9)),
      url("/images/puppies-backdrop-mobile.jpg") center/cover no-repeat;
    opacity:.55;
  }
}
@media (prefers-reduced-transparency:reduce){ .site-backdrop{ opacity:.35; } }

/* ---------- Hero Overlay ---------- */
.page-hero{ position:relative; text-align:center; padding:4rem 1rem 3rem; }
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.65)); z-index:0;
}
.page-hero > *{ position:relative; z-index:1; }

/* ---------- Glass Cards over Backdrop ---------- */
.section, .puppy-card, .price-card, .xp-card, .site-footer{
  background:rgba(13,16,20,.72);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
@supports (backdrop-filter:blur(6px)){
  .section, .puppy-card, .price-card, .xp-card, .site-footer{
    background:rgba(13,16,20,.55);
    backdrop-filter:blur(6px) saturate(105%);
  }
}

/* === Two-image placeholder (one block, two slots) === */
.dual-image-placeholder{
  max-width:1100px; margin:1rem auto; padding:10px;
  border:1px solid var(--border); border-radius:12px; background:var(--panel);
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.dual-image-placeholder img{
  width:100%; height:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:10px; display:block;
}
@media (max-width:768px){
  .dual-image-placeholder{ grid-template-columns:1fr; }
}

/* Litter captions under each image */
.litter-card{ display:flex; flex-direction:column; align-items:center; max-width:545px; }
.litter-card .image-holder{ margin-bottom:.45rem; }
.img-caption{ text-align:center; font-weight:700; color:var(--brand); line-height:1.3; letter-spacing:.2px; }

/* Phone icon (generic helper) */
.has-phone-icon{ display:flex; align-items:center; gap:.4rem; }
.has-phone-icon::before{
  content:""; display:inline-block; width:16px; height:16px;
  background:url('/images/phone-icon.svg') no-repeat center; background-size:contain;
}

/* --- Page-level tweaks for litter -> profile spacing --- */
.litter-section{ padding-bottom:.5rem; }
.section--compact{ padding-top:.5rem; }

/* Small phone link variant */
.phone-link--sm{ font-size:.85rem; line-height:1.2; }
.kv dd.has-phone-icon .phone-link{ font-size:.85rem; line-height:1.2; }

/* =============================
   Scrollbar (always visible) — place at end
   ============================= */

/* 1) Ensure page can scroll and show scrollbar */
html, body{
  overflow-y:auto !important;
  overflow-x:hidden;
  height:auto !important;
  min-height:100%;
  -webkit-overflow-scrolling:touch;
}

/* 2) If JS toggles classes to lock scroll, keep default scrolling when not active */
body:not(.menu-open):not(.nav-open){ overflow-y:auto !important; }

/* 3) Firefox scrollbar */
html{
  scrollbar-width:thick;
  /* thumb color | track color */
  scrollbar-color: var(--brand) rgba(255,255,255,.08);
}

/* 4) WebKit scrollbars (Chrome/Edge/Safari) */
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:rgba(255,255,255,.08); }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{
  /* fallback then modern brighten */
  background:#ff6a2c;
  background:color-mix(in srgb, var(--brand) 85%, white);
}

/* 5) Safety: in case a previous rule hid them */
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb{ display:block !important; }

/* --- Tiny tooltip / hover-card --- */
.tip{position:relative;display:inline-flex;align-items:center;gap:.35rem;cursor:help}
.tip[aria-expanded="true"]{cursor:default}
.tip__bubble{
  position:absolute; left:50%; bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px) scale(.98);
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:.6rem .75rem; min-width:220px; max-width:320px;
  font-size:.875rem; line-height:1.35; box-shadow:0 12px 28px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:30;
}
.tip__bubble::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:8px solid transparent; border-top-color:var(--panel);
  filter:drop-shadow(0 -1px 0 var(--border));
}
.tip:hover .tip__bubble,
.tip:focus-within .tip__bubble,
.tip[aria-expanded="true"] .tip__bubble{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1);
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
}
/* Optional placements */
.tip[data-place="right"] .tip__bubble{left:auto; right:-10px; bottom:50%; transform:translateY(50%) translateX(4px) scale(.98)}
.tip[data-place="right"] .tip__bubble::after{top:50%; left:-8px; transform:translateY(-50%); border:8px solid transparent; border-right-color:var(--panel)}
.tip[data-place="left"] .tip__bubble{left:-10px; right:auto; bottom:50%; transform:translateY(50%) translateX(-4px) scale(.98)}
.tip[data-place="left"] .tip__bubble::after{top:50%; left:auto; right:-8px; transform:translateY(-50%); border:8px solid transparent; border-left-color:var(--panel)}

/* Tip: green variant */
.tip--icon{ gap:.35rem; cursor:help; }
.tip--underline{ border-bottom:1px dotted rgba(135,214,141,.75); padding-bottom:1px; }
.tip__icon{ width:14px; height:14px; flex:0 0 14px; display:inline-block; color:var(--accent-green); opacity:.95; }
.tip:hover .tip__icon, .tip:focus-within .tip__icon, .tip[aria-expanded="true"] .tip__icon{ color:#a8e5ad; opacity:1; }
.tip:hover.tip--underline, .tip:focus-within.tip--underline, .tip[aria-expanded="true"].tip--underline{ border-bottom-color:#a8e5ad; }

/* Strong + soft highlight helpers */
.seo-hl{ font-weight:700; color:var(--brand); }
.achv{ color:#ff7a00; font-weight:600; }

/* Compact XP column lists */
.xp-col--tight{ padding:10px; }
.xp-col--tight h3{ margin:0 0 .35rem 0; font-size:1rem; }
.xp-col--tight ul{ margin:0; padding-left:1rem; list-style:disc; }
.xp-col--tight li{ margin:.25rem 0; line-height:1.35; }
.xp-col--tight li strong{ font-weight:700; color:var(--brand); }
@media (max-width:600px){ .xp-col--tight h3{ font-size:.95rem; } .xp-col--tight li{ margin:.2rem 0; } }

/* ===== Our Dams page + DM tooltip/badges ===== */
.dams-hero{ text-align:center; padding:1.25rem 1rem .25rem; }
.dams-hero p{ max-width:900px; margin:.5rem auto 0; color:var(--muted); }

.dam-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:1rem; }
.dam-card{ grid-column: span 6; }
@media (max-width: 900px){ .dam-card{ grid-column: span 12; } }

.dam-cta-row{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:.75rem; }

/* simple badge (shared) */
.badge{ display:inline-block; padding:.2rem .5rem; border:1px solid var(--border); border-radius:.5rem; color:var(--muted); font-size:.8rem; }

/* DM badges */
.dm-badge{ display:inline-block; padding:.15rem .45rem; border-radius:.4rem; font-weight:700; font-size:.8rem; line-height:1; border:1px solid rgba(255,255,255,.15); }
.dm-clear{ background:#122a17; color:#9be0a0; border-color:#194f24; }
.dm-carrier{ background:#1f2430; color:#ffd479; border-color:#3a3f4b; }
.dm-risk{ background:#3a1114; color:#ff9aa2; border-color:#5a1a1f; }
.dm-info{ background:#161b22; color:#cdd9e5; border-color:#2d333b; }

/* DM legend */
.dm-legend{ display:flex; gap:.6rem 1rem; flex-wrap:wrap; align-items:center; margin-top:.75rem; font-size:.9rem; }
.dm-legend__item{ display:inline-flex; align-items:center; gap:.4rem; }

/* Tag pills */
.image-holder{ position: relative; }
.image-holder img{ display: block; width: 100%; height: auto; }
.tag{ position:absolute; left:10px; top:10px; background:rgba(0,0,0,.55); backdrop-filter:saturate(140%) blur(2px); -webkit-backdrop-filter:saturate(140%) blur(2px); color:#fff; font-weight:700; font-size:.8rem; line-height:1; padding:.22rem .55rem; border-radius:999px; border:1px solid rgba(255,255,255,.22); }
.tag-2{ position:absolute; left:30px; top:30px; background:rgba(0,0,0,.55); backdrop-filter:saturate(140%) blur(2px); -webkit-backdrop-filter:saturate(140%) blur(2px); color:#fff; font-weight:700; font-size:.8rem; line-height:1; padding:.22rem .55rem; border-radius:999px; border:1px solid rgba(255,255,255,.22); }
.tag--accent{ border-color: rgba(255,122,0,.6); }
.tag--lg{ font-size:.9rem; padding:.3rem .65rem; }
.tag--tr{ right:10px; left:auto; top:10px; }
.tag--br{ right:10px; left:auto; bottom:10px; top:auto; }
.tag--bl{ left:10px; bottom:10px; top:auto; }

/* =============================
   Litter separators (centered asterisks)
   ============================= */
hr.litter-sep{ border:0; border-top:1px solid rgba(255,255,255,.22); margin:56px 0; position:relative; overflow:visible; }
hr.litter-sep::after{ content:"*******"; position:absolute; left:50%; top:0; transform:translate(-50%,-50%); display:inline-block; padding:0 .75rem; font-weight:800; font-size:.95rem; letter-spacing:.25em; color:rgba(255,255,255,.85); background:var(--bg); line-height:1; z-index:2; }

/* Optional: vertically center within the viewport */
.dog-price--middle{ min-height:60vh; display:grid; place-items:center; }
.dog-price--middle .price-card{ max-width:clamp(320px, 92vw, 760px); }

/* Center the purchase button inside price card */
.cta-row{ display:flex; justify-content:center; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }

/* Center helper */
.img-center{ display:block; margin:0 auto; }

/* Footer small heading sizes */
.small-h2{ font-size:1.1rem; font-weight:bold; margin:.5em 0; }
@media (min-width:768px){ .small-h2{ font-size:1.3rem; } }
@media (min-width:1024px){ .small-h2{ font-size:1.5rem; } }

/* NEW Mobile heading sizing view for H1 and H2 */
@media (max-width:640px){
  .site-header h1{ font-size:1.75rem; line-height:1.2; letter-spacing:.01em; }
  .page-title h1{ font-size:1.75rem; line-height:1.2; letter-spacing:.01em; }
  .section > h2,
  h2{ font-size:1.25rem; line-height:1.3; }
}

/* Optional CSS (breadcrumbs, etc.) */
.breadcrumb{ margin-bottom:.75rem; font-size:.875rem; opacity:.9; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0; }
.breadcrumb li+li:before{ content:"/"; opacity:.6; margin:0 .25rem; }
.site-header .subtitle{ max-width:72ch; opacity:.9; }
.selling-points{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; margin:1rem 0 0; padding:0; list-style:none; opacity:.95; }
.selling-points li{ padding:.35rem .6rem; border:1px solid rgba(255,255,255,.12); border-radius:9999px; font-size:.9rem; }
.cta.tertiary{ background:transparent; border:1px solid rgba(255,255,255,.18); }

/* Hero responsive sizing */
.page-hero{ padding-block:1.5rem 0; }
.page-hero h1{ font-size:clamp(1.75rem, 2.2vw + 1rem, 2.75rem); line-height:1.15; letter-spacing:-.01em; margin:0 0 .5rem; text-wrap:balance; }
.hero h1 { font-size: 2.5rem; background: rgba(0, 0, 0, 0.5); padding: 1rem 2rem; border-radius: 10px; }
.page-hero .page-subtitle{ font-size:clamp(1rem, 1.1vw + .6rem, 1.125rem); line-height:1.5; max-width:72ch; margin:0 auto; opacity:.9; padding-block-end:.75rem; }
@media (max-width:600px){
  .page-hero{ padding:1rem 1rem 0; }
  .page-hero h1{ font-size:1.375rem; line-height:1.2; }
  .page-hero .page-subtitle{ font-size:.9375rem; padding-block-end:.5rem; }
}

/* Card */
.card img{ width:100%; height:200px; object-fit:cover; }
@media (min-width:720px){ .card{ grid-template-columns:220px 1fr; } .card img{ height:100%; } }
@media (min-width:1024px){ .card img{ height:180px; } }

/* Dog grid & card */
.dog-grid{ display:grid; gap:2rem; max-width:1200px; margin:2rem auto; padding:0 1rem; }
.dog-card{ background:#111; border:1px solid #2a2f36; border-radius:1rem; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.dog-card-img{ width:100%; height:auto; display:block; }
.dog-card-body{ padding:1.5rem; }
.dog-card-title{ font-size:1.75rem; line-height:1.3; margin-bottom:.75rem; color:#fff; }
.dog-card-body p{ font-size:1rem; line-height:1.6; margin-bottom:1rem; }
@media (max-width:992px){ .dog-card-body{ padding:1.25rem; } .dog-card-title{ font-size:1.5rem; } .dog-card-body p{ font-size:.95rem; } }
@media (max-width:600px){ .dog-card-body{ padding:1rem; } .dog-card-title{ font-size:1.25rem; } .dog-card-body p{ font-size:.9rem; line-height:1.5; } }

/* Text helpers */
.vivid-orange-text{ color:#ff4d01; }
.accent-green-text{ color:#87d68d; }
.vivid-red-text{ color:#ff0000; }
.bright-red-text{ color:#ff1100; }
.highlight{ color:#e63946; font-weight:bold; }
.family-first{ color:#06d6a0; font-weight:600; }
.trademark{ color:#ffd60a; font-style:italic; }

/* === Global mobile heading scale (all pages) === */
@media (max-width: 560px) {
  .hero-title,
  .hero h1,
  h1 {
    font-size: clamp(1.15rem, 3.6vw + 0.55rem, 1.6rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em;
  }
  h2 { font-size: clamp(1.05rem, 2.8vw + 0.5rem, 1.35rem) !important; line-height: 1.28 !important; }
  h3 { font-size: clamp(0.98rem, 2.4vw + 0.45rem, 1.15rem) !important; line-height: 1.30 !important; }
}
@media (max-width: 360px) { .hero-overlay { padding: 0.75rem; } }

/* Disable global mobile heading scale when opted out */
@media (max-width: 560px) {
  body.no-mobile-heading-scale .hero-title,
  body.no-mobile-heading-scale .hero h1,
  body.no-mobile-heading-scale h1,
  body.no-mobile-heading-scale h2,
  body.no-mobile-heading-scale h3 {
    font-size: unset !important;
    line-height: unset !important;
  }
}

/* Mobile sizing for hero titles only */
@media (max-width: 560px) {
  .hero-title,
  .hero .hero-title,
  .hero-overlay .hero-title {
    font-size: clamp(1.15rem, 3.6vw + 0.55rem, 1.6rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em;
  }
  .hero-sub { 
    font-size: clamp(0.95rem, 2.6vw + 0.45rem, 1.1rem) !important; 
    line-height: 1.35 !important;
  }
  .hero-overlay { padding: 0.9rem; }
}
@media (max-width: 360px) {
  .hero-title,
  .hero .hero-title,
  .hero-overlay .hero-title { font-size: 1.2rem !important; }
}

/* Footer: normalize weight */
#site-footer, #site-footer * { font-weight: 400; }
#site-footer .footer-heading { font-weight: 700; }

/* Warning - Call Out */
.note{display:flex;align-items:flex-start;gap:.5rem;
  padding:.5rem .6rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);color:#fff;
  font-size:.95rem;line-height:1.35}
.note--warn{border-color:rgba(255,102,0,.35)} 
.note__icon{width:1rem;height:1rem;margin-top:.1rem;color:#87d68d;flex:0 0 auto}
.note b{color:#fff}

/* Optional niceties for elements used in your article */
.callout{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:1rem;
  color:#cfd6e5;
  margin:1rem 0 1.25rem;
}
/* Accent + compact warning note */
.accent { color:#98ffa6; font-weight:700; }
/* merged .note styles above to avoid duplication */

/* ==============================
   FYI page hero + layout (scoped)
   ============================== */
body.page-fyi .hero{position:relative;width:100%;height:clamp(42vh,60vh,80vh);overflow:hidden}
body.page-fyi .hero>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
body.page-fyi .hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.75rem;padding:1rem;background:rgba(0,0,0,.3);color:#fff}
body.page-fyi .hero-title{font-size:clamp(1.8rem,3.2vw,2.8rem);margin:0;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.45)}
body.page-fyi .hero-sub{font-size:clamp(1rem,1.2vw,1.15rem);margin:0 0 .75rem 0;opacity:.95}
body.page-fyi .cta{display:inline-block;padding:.8rem 1.6rem;border-radius:999px;font-weight:700;text-decoration:none;color:#000;background:#ff6600;box-shadow:0 6px 20px rgba(255,102,0,.35)}

body.page-fyi .container{max-width:1200px;margin:0 auto;padding:1.25rem;display:grid;grid-template-columns:3fr 1fr;gap:2rem}
body.page-fyi .lead{margin:1.25rem auto 1.5rem;color:#cfd6e5;max-width:900px;text-align:center;grid-column:1/-1}

body.page-fyi .cards{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
body.page-fyi .card{grid-column:span 6;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;display:flex;align-items:stretch}
body.page-fyi .card .thumb{flex:0 0 220px;max-width:220px;aspect-ratio:4/3;background:#0e1218;overflow:hidden}
body.page-fyi .thumb img{width:100%;height:100%;object-fit:cover;display:block}
body.page-fyi .body{padding:.75rem 1rem}
body.page-fyi .title{font-size:1.05rem;font-weight:800;margin:.3rem 0 .35rem;color:#fff;text-decoration:none}
body.page-fyi .title:hover{color:#ff6600}
body.page-fyi .excerpt{color:#c2cce0;font-size:.9rem;margin:0}
body.page-fyi .readmore a{color:#ff6600;font-weight:700;text-decoration:none}
body.page-fyi .readmore a:hover{text-decoration:underline}

body.page-fyi .sidebar{display:grid;gap:1.5rem}
body.page-fyi .sidecard{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1rem;color:#cfd6e5}
body.page-fyi .sidecard h3{margin-top:0;color:#fff}

/* Responsive */
@media (max-width:1024px){
  body.page-fyi .container{grid-template-columns:1fr}
  body.page-fyi .card{grid-column:span 12}
}
@media (max-width:680px){
  body.page-fyi .card{display:block}
  body.page-fyi .card .thumb{width:100%;max-width:none;aspect-ratio:16/9}
  body.page-fyi .card .body{padding:1rem}
}

/* Clamp excerpt + reveal readmore on hover */
body.page-fyi .card .excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.page-fyi .card .readmore{margin-top:.45rem;opacity:0;transform:translateY(2px);transition:opacity .15s ease, transform .15s ease}
body.page-fyi .card:hover .readmore{opacity:1;transform:translateY(0)}

/* FYI link cards */
.fyi-links.fyi-pretty .fyi-list{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
@media (min-width: 900px){ .fyi-links.fyi-pretty .fyi-list{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.fyi-card{ display:block; padding:.9rem 1rem; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:14px; text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.fyi-card:hover{ border-color:rgba(255,102,0,.55); box-shadow:0 10px 24px rgba(0,0,0,.25); transform:translateY(-1px); }
.fyi-card:focus-visible{ outline:2px solid #ff6600; outline-offset:2px; }
.fyi-header{ display:flex; align-items:center; gap:.5rem; }
.fyi-dot{ width:.55rem; height:.55rem; border-radius:999px; background:#ff6600; box-shadow:0 0 0 4px rgba(255,102,0,.15); flex:0 0 auto; }
.fyi-title{ color:#fff; font-weight:800; line-height:1.25; flex:1 1 auto; }
.fyi-chip{ font-size:.75rem; line-height:1; padding:.18rem .5rem; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:#cfd6e5; white-space:nowrap; }
.fyi-chev{ margin-left:.25rem; opacity:.6; transition:transform .15s ease, opacity .15s ease; }
.fyi-card:hover .fyi-chev{ transform:translateX(4px); opacity:1; }
.fyi-excerpt{ margin:.45rem 0 0; color:#cfd6e5; font-size:.95rem; }
.fyi-chip--accent{ background:#ff6600; color:#0b0d10; border-color:#ff6600; font-weight:800; box-shadow:0 0 0 3px rgba(255,102,0,.18) inset; }
/*NEW SCHROLL BAR */

html { overflow-y: scroll !important; }

/* === Gunbil Form & Button Accent System (Green) === */

/* Primary buttons (solid green) */
button,
input[type="submit"],
.btn,
.btn-primary {
  background: #87d68d;   /* accent green */
  color: #0b0f14;        /* dark text */
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .2s ease, opacity .2s ease;
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
.btn-primary:hover {
  opacity: 0.9;
}

button:focus-visible,
input[type="submit"]:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid rgba(255,77,1,.6);
  outline-offset: 2px;
}

/* Secondary / Ghost buttons (outlined) */
.btn-ghost,
.btn-secondary {
  background: transparent;
  border: 2px solid #87d68d;
  color: #87d68d;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.btn-ghost:hover,
.btn-secondary:hover {
  background: #87d68d;
  color: #0b0f14;
}

.btn-ghost:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid rgba(255,77,1,.6);
  outline-offset: 2px;
}

/* Checkboxes & Radio buttons */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #87d68d;   /* green accent */
  width: 18px;
  height: 18px;
  cursor: pointer;
}

label input[type="checkbox"],
label input[type="radio"] {
  margin-right: 6px;
  vertical-align: middle;
}

/* Inputs, Selects & Textareas (focus state) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  border: 1px solid #2a2f36;
  border-radius: 10px;
  background: #0b0d10;
  color: #e8e9ea;
  padding: .75rem;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: #87d68d;
  box-shadow: 0 0 0 2px rgba(135,214,141,.35);
  outline: none;
}