/* ============ Hawaii Rabbitry ============ */
:root{
  --green:#2E971B;
  --green-dark:#1F6E12;
  --coral:#FF3939;
  --coral-dark:#E62727;
  --cream:#faf6ef;
  --ink:#3a3a36;
  --muted:#6f6f68;
  --line:#e7e1d6;
  --radius:14px;
  --shadow:0 6px 22px rgba(60,55,40,.10);
  --maxw:1120px;
  --font-display:'Righteous',cursive;
  --font-body:Helvetica,Arial,sans-serif;
  --font-nav:'Raleway',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:#fff;
  font-family:var(--font-body);
  font-size:17px;line-height:1.65;
}
img{max-width:100%;display:block}
a{color:var(--coral-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;color:var(--ink);margin:.2em 0 .5em}
h1{font-size:2.4rem;color:var(--coral)}
h2{font-size:1.9rem}
h3{font-size:1.3rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.section.alt{background:var(--cream)}
.center{text-align:center}
.lead{font-size:1.12rem;color:var(--muted);max-width:760px;margin:0 auto 1em}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--coral);color:#fff;padding:12px 26px;border-radius:999px;
  font-weight:600;border:none;cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.btn:hover{background:var(--coral-dark);text-decoration:none;transform:translateY(-1px)}
.btn.green{background:var(--green)}
.btn.green:hover{background:var(--green-dark)}
.btn.ghost{background:#fff;color:var(--coral-dark);border:2px solid var(--coral)}

/* ---- header ---- */
.topbar{background:var(--green);color:#fff}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:54px;flex-wrap:wrap}
.brand-text{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;color:#fff;font-size:1.15rem}
.social-top{margin-left:auto;display:flex;gap:12px;align-items:center}
.social-top a{display:inline-flex}
.social-top img{width:26px;height:26px}
nav.mainnav{background:var(--green);border-top:1px solid rgba(255,255,255,.15)}
nav.mainnav .wrap{display:flex;flex-wrap:wrap;gap:2px 6px;padding-top:6px;padding-bottom:6px}
nav.mainnav a{font-family:var(--font-nav);color:#fff;font-size:.93rem;font-weight:500;padding:7px 12px;border-radius:8px;white-space:nowrap}
nav.mainnav a:hover{background:rgba(255,255,255,.16);text-decoration:none}
nav.mainnav a.active{background:var(--coral)}
.navtoggle{display:none}

/* ---- hero / logo ---- */
.logo-hero{padding:34px 0 10px;text-align:center}
/* Sized to match the Wix home page, where the logo runs almost the full
   width: 955 x 374 at a 988px screen. The capped 230px height made it 409px
   wide -- less than half. The logo file (1920 x 1080) has a lot of empty
   transparent space above and below the artwork, so the 955:374 frame with
   object-fit:cover trims only that empty space, exactly as Wix's frame does;
   the artwork itself is never cut. Shrinks with the screen on phones. */
.logo-hero img{display:block;margin:0 auto;width:955px;max-width:100%;height:auto;max-height:none;aspect-ratio:955/374;object-fit:cover}
.hero-social{display:flex;gap:16px;justify-content:center;margin:18px 0 6px}
.hero-social img{width:42px;height:42px}

/* ---- featured cards (home) ---- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.feat-grid img{aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---- generic card grids ---- */
.grid{display:grid;gap:26px}
.grid.cols2{grid-template-columns:repeat(2,1fr)}
.grid.cols3{grid-template-columns:repeat(3,1fr)}
.grid.cols4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.card .imgs.one{grid-template-columns:1fr}
.card .imgs img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card .body{padding:16px 18px}
.card .body h3{margin-top:0;color:var(--coral)}
.card .meta{font-size:.9rem;color:var(--green-dark);font-weight:600;margin:-4px 0 8px}
.card p{font-size:.97rem;color:var(--muted);margin:.4em 0}

/* badges */
.badge{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:4px 12px;border-radius:999px;text-transform:uppercase}
.badge.available{background:#e4efd0;color:#5a7320}
.badge.reserved{background:#f6ddd4;color:#b1492e}
.badge.sold{background:#eee;color:#777}
/* Listed with a countdown but not reservable yet. Must not read as
   available, so it gets its own colour rather than reusing it. */
.badge.upcoming{background:#dfe7f5;color:#33518c}

/* available card */
.bunny-card{position:relative}
.bunny-card img{aspect-ratio:1/1;object-fit:cover}
.bunny-card .body{display:flex;flex-direction:column;gap:6px}
.price{font-weight:700;color:var(--ink)}

/* litter card */
.litter .cross{font-family:var(--font-display);color:var(--coral);font-weight:700;text-align:center;font-size:1.25rem;margin:10px 0 0}
.litter .due{display:inline-block;background:var(--green);color:#fff;padding:3px 14px;border-radius:999px;font-size:.85rem;font-weight:600;margin:4px 0 10px}
.parent{font-size:.93rem;margin:.2em 0}
.parent b{color:var(--green-dark)}

/* section subheads */
.subhead{font-family:var(--font-body);font-weight:400;color:var(--green-dark);font-size:1.5rem;margin:34px 0 14px;border-bottom:2px solid var(--line);padding-bottom:6px}

/* article / text pages */
.article{max-width:840px;margin:0 auto}
.article h2{color:var(--coral);margin-top:1.4em}
.article h3,.article h4{color:var(--green-dark)}
.article ul{padding-left:1.2em}
.article li{margin:.4em 0}
.article img{border-radius:var(--radius);box-shadow:var(--shadow);margin:18px auto}
.callout{background:var(--cream);border-left:4px solid var(--coral);border-radius:8px;padding:16px 20px;margin:20px 0}

/* page banner */
.banner{background:var(--cream);text-align:center;padding:40px 0 26px}
.banner h1{margin:0}
.banner p{color:var(--muted);max-width:720px;margin:8px auto 0}

/* adopted gallery */
.adopt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.adopt-card{text-align:center}
.adopt-card img{aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.adopt-card .nm{font-family:var(--font-display);color:var(--coral);font-weight:700;margin-top:8px}
.adopt-card .desc{font-size:.84rem;color:var(--muted);line-height:1.4}
.adopt-card .par{font-size:.8rem;color:var(--green-dark);margin-top:4px}

/* contact form */
.form{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.form label{display:block;font-weight:600;margin:14px 0 6px;font-size:.95rem}
.form input,.form select,.form textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.97rem}
.form textarea{min-height:120px;resize:vertical}
.form .chk{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.9rem;font-weight:400}
.form .chk input{width:auto;margin-top:5px}

/* pricing list */
.pricing{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.pricing .p{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 30px;text-align:center;min-width:170px}
.pricing .p .n{font-family:var(--font-display);color:var(--green-dark);font-weight:700}
.pricing .p .v{font-size:1.6rem;color:var(--coral);font-weight:700}

/* loading / empty */
.state{text-align:center;color:var(--muted);padding:40px 0}

/* footer */
footer.site{background:var(--green);color:#fff;padding:36px 0;margin-top:10px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
footer.site a{color:#fff}
footer.site .fnav{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.9rem}
footer.site .fsoc{display:flex;gap:12px}
footer.site .fsoc img{width:34px;height:34px}
.foot-brand{font-family:var(--font-display);font-weight:700;letter-spacing:.05em}

/* responsive */
@media(max-width:860px){
  h1{font-size:2rem}
  .feat-grid{grid-template-columns:1fr}
  .grid.cols3,.grid.cols4{grid-template-columns:repeat(2,1fr)}
  .adopt-grid{grid-template-columns:repeat(2,1fr)}
  .navtoggle{display:inline-flex;margin-left:auto;background:transparent;border:1.5px solid rgba(255,255,255,.7);color:#fff;border-radius:8px;padding:6px 12px;font-weight:600;cursor:pointer}
  .social-top{margin-left:0;order:3}
  nav.mainnav .wrap{display:none;flex-direction:column;align-items:stretch}
  nav.mainnav.open .wrap{display:flex}
  nav.mainnav a{padding:11px 12px;border-radius:8px}
}
@media(max-width:520px){
  .grid.cols2,.grid.cols3,.grid.cols4{grid-template-columns:1fr}
  .adopt-grid{grid-template-columns:1fr 1fr}
  .card .imgs{grid-template-columns:1fr 1fr}
}

/* Direct-email fallback under the contact form. Sits below the card rather
   than inside it, so it reads as an alternative to the form, not a field. */
.email-fallback{max-width:640px;margin:18px auto 0;text-align:center;
  color:var(--muted);font-size:.95rem}
.email-fallback a{font-weight:600}
.foot-email{font-size:.88rem;margin-top:6px}
.foot-email a{color:#fff;opacity:.9;text-decoration:underline}
.foot-email a:hover{opacity:1}

/* Litter babies list — sits between the date and the parents, so the
   most-wanted information (what was actually born) is read first. */
.card.litter .kits{margin:14px 0 6px;font-size:.95rem;line-height:1.5}
.card.litter .kits b{color:var(--green-dark)}

/* ===== Photo carousel =====
   Matches how the old Wix site showed photos: one at a time, with
   arrows, rather than the first two side by side.

   Scroll-snap does the work. That gives real swiping on a phone with
   no JS, and means the whole thing still degrades to a scrollable row
   if scripting is off. */
.gal{position:relative;background:#000;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.gal-track::-webkit-scrollbar{display:none}
/* snap-align:start, not center. With full-width items, centre alignment
   puts the snap points at awkward half-offsets and the browser re-snaps
   any programmatic scroll straight back to where it began. Aligning to
   the start puts them at 0, 1x, 2x the track width -- which is what both
   the arrows and the counter assume. */
.gal-img{flex:0 0 100%;width:100%;aspect-ratio:4/3;object-fit:cover;
  scroll-snap-align:start;display:block}

.gal-btn{position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);
  font-size:1.5rem;line-height:1;padding:0 0 3px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, transform .15s}
.gal-btn:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.gal-btn:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.gal-prev{left:10px}
.gal-next{right:10px}

.gal-count{position:absolute;right:10px;bottom:10px;
  background:rgba(0,0,0,.55);color:#fff;font-size:.78rem;font-weight:600;
  padding:3px 10px;border-radius:999px;letter-spacing:.02em}

/* Touch devices get swiping, so the arrows are just clutter over the
   photo -- and they sit exactly where a thumb lands mid-swipe. */
@media (hover:none){
  .gal-btn{display:none}
}

/* Herd and litters: one full-width card per rabbit/litter, matching the
   old Wix layout. A two-column grid shrank the photos to the point that
   the carousel was pointless. */
.herd-list{display:grid;gap:34px;max-width:760px;margin:0 auto}
.herd-card .body{padding:20px 22px 24px}
.herd-card h3{margin:0 0 2px;font-family:var(--font-display);
  color:var(--ink);font-size:1.7rem;font-weight:400}

/* ===== Wix look — Our Herd & Upcoming Litters =============================
   Measured from the live Wix pages on 2026-09-10 (988px viewport) because
   Sai wants these two pages to match what her customers are used to:
     page titles     Righteous 72px, centred (black on Herd, green on Litters)
     section titles  Righteous 72px, green, centred ("Bucks", "Does")
     rabbit names    Righteous 50px, black, left
     litter names    Righteous 40px, green, centred
     body text       Helvetica 20px, 1.88 line height, black
     bands           full width: bucks alternate #C8EAC1 / white,
                     does #FFCED5 / white, litters #C8EAC1 / white
   The heading font was identified from the Wix font file's own name table:
   it IS Righteous, which this site already loads, so the headings are the
   same typeface rather than a lookalike. */
.wix-hero{background:#fff;text-align:center;padding:64px 20px 34px}
.wix-hero h1{font-family:var(--font-display);font-weight:400;font-size:72px;line-height:1.3;color:#000;margin:0 0 18px}
.wix-hero.green h1{color:var(--green)}
.wix-hero p{font-family:var(--font-body);font-size:20px;line-height:1.88;color:#000;max-width:820px;margin:0 auto}
.wix-section-title{font-family:var(--font-display);font-weight:400;font-size:72px;line-height:1.4;color:var(--green);text-align:center;margin:40px 0 30px}
.wix-band{padding:80px 20px 90px}
.band-green{background:#C8EAC1}
.band-pink{background:#FFCED5}
.band-white{background:#fff}
.wix-col{max-width:763px;margin:0 auto}
.wix-name{font-family:var(--font-display);font-weight:400;font-size:50px;line-height:1.4;color:#000;margin:0 0 12px}
.wix-desc{font-family:var(--font-body);font-size:20px;line-height:1.88;color:#000;margin:29px 0 0}

/* Herd carousel: square corners, the next photo peeking in from the right,
   a white round arrow sitting on the photo's right edge. */
.gal--peek{background:transparent;border-radius:0;overflow:hidden}
.gal--peek .gal-track{gap:10px}
/* Photos keep their own shape, exactly as the Wix herd page does: every photo
   is the same HEIGHT (473px, measured on Wix) and its width follows the photo
   -- a tall photo comes out narrow (Teddy: 367px on Wix), a wide one ~710px.
   Nothing is cropped. The earlier version forced every photo to 3:2 with
   object-fit:cover, which cut the top and bottom off every portrait photo.
   min(…, 56vw) scales the height down on phones.
   min-width:0 still matters: a flex item's automatic minimum width is its
   content width, which would otherwise override the sizing here. */
.gal--peek .gal-img{flex:0 0 auto;height:min(473px,56vw);width:auto;max-width:100%;min-width:0;aspect-ratio:auto;object-fit:contain;border-radius:0}
.gal--peek .gal-count{display:none}
/* Fixed near the right edge of the frame, where Wix puts it (23px in).
   It can no longer follow the photo edge because photos differ in width. */
.gal--peek .gal-next{right:23px}
.gal-btn[hidden]{display:none}

/* Litters: name on top, photos on the left, details on the right. */
.wix-litter-title{font-family:var(--font-display);font-weight:400;font-size:40px;line-height:1.4;color:var(--green);text-align:center;margin:0 0 40px}
/* Details column is a fixed 350px so it starts ~600px in on a 988px screen,
   where Wix has it (602px). Two equal columns put it at 514px. */
.wix-litter-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:44px;max-width:910px;margin:0 auto;align-items:start}
.wix-litter-text{font-family:var(--font-body);font-size:20px;line-height:1.88;color:#000}
.wix-litter-text p{margin:0 0 1.88em}
.wix-litter-text p:last-child{margin-bottom:0}

/* Thumbnail gallery: the photo shown whole (never cropped), thumbnails
   underneath, small black round arrows -- the Wix "slider with thumbs". */
.tgal-stage{position:relative;height:314px;display:flex;align-items:center;justify-content:center}
.tgal-img{max-height:100%;max-width:calc(100% - 80px);width:auto;height:auto;object-fit:contain;display:block}
.tgal-img[hidden]{display:none}
.tgal-btn{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:0;background:#000;color:#fff;font-size:18px;line-height:1;padding:0 0 2px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tgal-prev{left:0}
.tgal-btn[hidden]{display:none}
.tgal-next{right:0}
.tgal-btn:focus-visible,.tgal-thumb:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.tgal-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.tgal-thumbs::-webkit-scrollbar{display:none}
.tgal-thumb{flex:0 0 calc(25% - 6px);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;opacity:.55;transition:opacity .15s}
.tgal-thumb.is-on,.tgal-thumb:hover{opacity:1}
.tgal-thumb img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:760px){
  .wix-hero{padding:40px 16px 20px}
  .wix-hero h1,.wix-section-title{font-size:44px}
  .wix-hero p,.wix-desc,.wix-litter-text{font-size:17px}
  .wix-name{font-size:34px}
  .wix-litter-title{font-size:30px;margin-bottom:24px}
  .wix-band{padding:44px 16px 52px}
  .wix-litter-grid{grid-template-columns:1fr;gap:24px}
  .tgal-stage{height:280px}
}

/* ===== Wix look — Lionheads VS Holland Lops (breeds.html) ==================
   Measured from the live Wix page on 2026-09-10 at a 988px viewport:
     page and breed titles  Righteous 56px, coral, left
     section headings       Righteous 22px, green, left
     body text              Helvetica 20px / 37.6px, black, 876px column
     breed photos           full width, up to 980px, whole photo (the files
                            are already the exact shape of the Wix frame)
     slideshow              photo 539px tall, width follows the photo,
                            65px black rounded arrows, bold 22px caption */
.breeds{background:#fff;padding:55px 0 90px}
.breeds-col{max-width:876px;margin:0 auto}
.breeds-title{font-family:var(--font-display);font-weight:400;font-size:56px;line-height:1.4;color:var(--coral);text-align:left;margin:0 0 30px}
.breeds-part{margin:230px 0 50px}
.breeds-col p{font-family:var(--font-body);font-size:20px;line-height:1.88;color:#000;margin:0 0 37.6px}
.breeds-col h4{font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.4;color:var(--green);margin:120px 0 12px}
.breeds-hero{display:block;width:100%;max-width:980px;height:auto;margin:0 auto 32px;border-radius:0;box-shadow:none}
.breeds-show{max-width:811px;margin:20px auto 0}

.tgal--show .tgal-stage{height:539px}
.tgal--show .tgal-img{max-width:100%}
.tgal--show .tgal-btn{width:65px;height:65px;border-radius:12%;font-size:40px;padding:0 0 6px;top:279px;transform:none}
.tgal--show .tgal-prev{left:22px}
.tgal--show .tgal-next{right:23px}
.tgal-cap{font-family:var(--font-body);font-weight:700;font-size:22px;line-height:1.4;color:#000;margin:25px 0 0 9px}
.tgal-cap[hidden]{display:none}

@media (max-width:760px){
  .breeds{padding:36px 16px 60px}
  .breeds-title{font-size:36px}
  .breeds-part{margin:90px 0 24px}
  .breeds-col p{font-size:17px;margin-bottom:28px}
  .breeds-col h4{font-size:20px;margin-top:56px}
  .breeds-hero{margin-bottom:24px}
  .tgal--show .tgal-stage{height:min(539px,100vw)}
  .tgal--show .tgal-btn{width:44px;height:44px;font-size:28px;top:50%;transform:translateY(-50%)}
  .tgal--show .tgal-prev{left:0}
  .tgal--show .tgal-next{right:0}
  .tgal-cap{font-size:18px}
}

/* Purchase Agreement: the two photos Wix shows side by side at the bottom
   (472 x 790 each at 988px). Whole photos, never cropped. */
.article .pa-photos{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:36px 0 0}
.article .pa-photos img{width:100%;height:auto;margin:0;border-radius:0;box-shadow:none}
@media (max-width:560px){.article .pa-photos{grid-template-columns:1fr}}

/* Contact: the Wix photo gallery under the form. Each photo shown whole at
   523px tall (Wix), thumbnails beneath, thin grey chevron arrows as on Wix
   rather than the black circles the litters use. */
.contact-gallery{padding-top:0}
.tgal--contact{max-width:811px;margin:0 auto}
.tgal--contact .tgal-stage{height:523px}
.tgal--contact .tgal-img{max-width:calc(100% - 90px)}
.tgal--contact .tgal-btn{background:transparent;color:#888;width:36px;height:56px;border-radius:0;font-size:52px;padding:0 0 8px}
.tgal--contact .tgal-btn:hover{color:#333}
.tgal--contact .tgal-thumbs{margin-top:12px}
.tgal--contact .tgal-thumb{flex:0 0 96px}
@media (max-width:760px){
  .tgal--contact .tgal-stage{height:min(523px,72vw)}
  .tgal--contact .tgal-img{max-width:calc(100% - 60px)}
  .tgal--contact .tgal-thumb{flex:0 0 72px}
}