/* ============================================================
   SUNNYSIDE — Kinvara website template demo
   Bright & playful. Fictional breeder: Pippin & Co. French Bulldogs.
   Customize per customer by editing the :root token block only.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --sunshine: #FFC94D;
  --coral:    #FF6F61;
  --coral-d:  #E85546;
  --teal:     #0E7C7B;
  --teal-d:   #0A5F5E;
  --paper:    #FFFAF2;
  --white:    #FFFFFF;
  --ink:      #33302E;
  --ink-soft: #6B645D;
  --display: 'Fredoka', sans-serif;
  --body:    'Nunito', -apple-system, sans-serif;
  --shadow: 0 10px 26px -10px rgba(51,48,46,.22);
  --max: 1140px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12}
h1{font-size:clamp(2.5rem,5.8vw,4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.3rem}

.ss-container{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- buttons ---------- */
.ss-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:1rem;padding:15px 30px;border-radius:999px;border:3px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s}
.ss-btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:var(--shadow)}
.ss-btn--coral{background:var(--coral);color:var(--white)}
.ss-btn--coral:hover{background:var(--coral-d)}
.ss-btn--teal{background:var(--teal);color:var(--white)}
.ss-btn--teal:hover{background:var(--teal-d)}
.ss-btn--outline{border-color:var(--ink);color:var(--ink);background:var(--white)}
.ss-btn--sun{background:var(--sunshine);color:var(--ink)}

/* ---------- floating pill nav ---------- */
.ss-headwrap{position:sticky;top:14px;z-index:60;padding:0 16px}
.ss-header{max-width:900px;margin:0 auto;background:var(--white);border:3px solid var(--ink);border-radius:999px;box-shadow:6px 6px 0 rgba(51,48,46,.16);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 22px}
.ss-logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.2rem}
.ss-logo__mark{width:38px;height:38px;border-radius:50%;background:var(--sunshine);border:2.5px solid var(--ink);display:grid;place-items:center;flex:none;transform:rotate(-8deg)}
.ss-logo small{display:block;font-family:var(--body);font-weight:800;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.ss-nav{display:flex;align-items:center;gap:4px}
.ss-nav a{font-weight:800;font-size:.92rem;color:var(--ink-soft);padding:9px 16px;border-radius:999px}
.ss-nav a:hover{background:var(--paper);color:var(--ink)}
.ss-nav a[aria-current]{background:var(--sunshine);color:var(--ink)}
.ss-nav a.ss-nav__cta{background:var(--coral);color:var(--white)}
.ss-nav a.ss-nav__cta:hover{background:var(--coral-d)}
.ss-burger{display:none;background:var(--sunshine);border:2.5px solid var(--ink);border-radius:50%;width:42px;height:42px;cursor:pointer;place-items:center}
.ss-burger span{display:block;width:18px;height:2.5px;background:var(--ink);margin:3.5px auto;border-radius:2px}

/* ---------- hero: sticker collage ---------- */
.ss-hero{padding:74px 0 40px;position:relative;overflow:hidden}
.ss-hero::before{content:"";position:absolute;top:-140px;right:-140px;width:430px;height:430px;border-radius:50%;background:var(--sunshine);opacity:.35}
.ss-hero::after{content:"";position:absolute;bottom:-80px;left:-120px;width:300px;height:300px;border-radius:50%;background:var(--teal);opacity:.14}
.ss-hero__grid{max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative}
.ss-kicker{display:inline-block;font-family:var(--display);font-weight:600;font-size:.9rem;background:var(--white);border:2.5px solid var(--ink);border-radius:999px;padding:8px 18px;transform:rotate(-2deg);box-shadow:4px 4px 0 var(--sunshine);margin-bottom:22px}
.ss-hero h1 .squiggle{color:var(--coral);position:relative;white-space:nowrap}
.ss-hero__sub{font-size:1.12rem;color:var(--ink-soft);margin:20px 0 30px;max-width:32rem;font-weight:600}
.ss-collage{position:relative;min-height:460px}
.ss-polaroid{position:absolute;background:var(--white);border:2.5px solid var(--ink);border-radius:18px;padding:12px 12px 16px;box-shadow:var(--shadow);text-align:center}
.ss-polaroid img{border-radius:10px;object-fit:cover;width:100%}
.ss-polaroid figcaption{font-family:var(--display);font-weight:600;font-size:.9rem;margin-top:9px}
.ss-polaroid--a{width:60%;top:0;left:4%;transform:rotate(-5deg);z-index:2}
.ss-polaroid--a img{aspect-ratio:1/1}
.ss-polaroid--b{width:46%;bottom:6%;right:0;transform:rotate(4deg);z-index:3}
.ss-polaroid--b img{aspect-ratio:1/1.1}
.ss-tape{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(3deg);width:88px;height:24px;background:rgba(255,201,77,.85);border-radius:3px}
.ss-sticker{position:absolute;font-family:var(--display);font-weight:600;font-size:.88rem;background:var(--coral);color:var(--white);border:2.5px solid var(--ink);border-radius:999px;padding:9px 16px;transform:rotate(8deg);z-index:4;box-shadow:3px 3px 0 rgba(51,48,46,.2)}
.ss-sticker--a{top:-6px;right:8%}
.ss-sticker--b{bottom:2%;left:0;background:var(--teal);transform:rotate(-6deg)}

/* ---------- wavy divider ---------- */
.ss-wave{display:block;width:100%;height:52px;margin-bottom:-1px}
.ss-wave--flip{transform:scaleY(-1);margin:-1px 0 0}

/* ---------- sections ---------- */
.ss-section{padding:80px 0}
.ss-section--teal{background:var(--teal);color:var(--white)}
.ss-section--sun{background:var(--sunshine)}
.ss-section-head{max-width:600px;margin:0 auto 50px;text-align:center}
.ss-section-head p{color:var(--ink-soft);margin-top:12px;font-weight:600}
.ss-section--teal .ss-section-head p{color:rgba(255,255,255,.85)}
.ss-tag-kicker{display:inline-block;font-family:var(--display);font-weight:600;font-size:.82rem;background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:6px 16px;transform:rotate(-1.5deg);margin-bottom:16px}

/* ---------- litter cards ---------- */
.ss-litters{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.ss-litter{background:var(--white);border:3px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:7px 7px 0 rgba(51,48,46,.14);display:flex;flex-direction:column;transition:transform .18s}
.ss-litter:hover{transform:translateY(-5px) rotate(-.5deg)}
.ss-litter__img{position:relative;padding:14px 14px 0}
.ss-litter__img img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;border:2.5px solid var(--ink)}
.ss-badge{position:absolute;top:26px;left:26px;font-family:var(--display);font-weight:600;font-size:.8rem;border:2.5px solid var(--ink);border-radius:999px;padding:7px 14px;transform:rotate(-3deg);background:var(--white)}
.ss-badge--available{background:var(--sunshine)}
.ss-badge--expected{background:var(--teal);color:var(--white)}
.ss-badge--planned{background:var(--white)}
.ss-litter__body{padding:22px 24px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.ss-litter h3{font-size:1.5rem}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px}
.ss-chip{font-weight:800;font-size:.78rem;background:var(--paper);border:2px solid var(--ink);padding:5px 13px;border-radius:999px}
.ss-chip--price{background:var(--sunshine)}
.ss-dates{border-top:2.5px dashed rgba(51,48,46,.25);padding-top:14px;display:grid;gap:7px;font-size:.92rem}
.ss-dates div{display:flex;justify-content:space-between;gap:12px}
.ss-dates span{color:var(--ink-soft);font-weight:600}
.ss-parents{display:flex;flex-wrap:wrap;gap:10px}
.ss-parent{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:4px 14px 4px 4px;font-size:.84rem;font-weight:800}
.ss-parent img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1.5px solid var(--ink)}
.ss-litter__actions{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap}
.ss-litter__actions .ss-btn{padding:11px 20px;font-size:.9rem}

/* ---------- puppy polaroids ---------- */
.ss-pups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px;padding-top:10px}
.ss-pup{background:var(--white);border:2.5px solid var(--ink);border-radius:18px;padding:12px 12px 18px;box-shadow:var(--shadow);text-align:center;position:relative;transition:transform .18s}
.ss-pup:nth-child(odd){transform:rotate(-2.5deg)}
.ss-pup:nth-child(even){transform:rotate(2deg)}
.ss-pup:hover{transform:rotate(0) translateY(-5px)}
.ss-pup::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);width:80px;height:22px;background:rgba(255,201,77,.9);border-radius:3px;z-index:2}
.ss-pup img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:2px solid var(--ink)}
.ss-pup h3{margin:14px 0 2px;font-size:1.2rem}
.ss-pup p{font-size:.88rem;color:var(--ink-soft);font-weight:600}
.ss-status{display:inline-block;margin-top:10px;font-family:var(--display);font-weight:600;font-size:.78rem;border:2px solid var(--ink);border-radius:999px;padding:5px 14px}
.ss-status--available{background:var(--sunshine)}
.ss-status--reserved{background:var(--coral);color:var(--white)}
.ss-status--gone{background:var(--paper);color:var(--ink-soft)}

/* ---------- features ---------- */
.ss-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.ss-feature{background:var(--white);border:3px solid var(--ink);border-radius:22px;padding:30px 26px;box-shadow:6px 6px 0 rgba(51,48,46,.14);color:var(--ink)}
.ss-feature__icon{width:54px;height:54px;border-radius:50%;background:var(--sunshine);border:2.5px solid var(--ink);display:grid;place-items:center;margin-bottom:16px;transform:rotate(-6deg)}
.ss-feature h3{margin-bottom:8px}
.ss-feature p{font-size:.95rem;color:var(--ink-soft);font-weight:600}

/* ---------- dogs ---------- */
.ss-dogs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.ss-dog{background:var(--white);border:3px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:7px 7px 0 rgba(51,48,46,.14)}
.ss-dog__visual{position:relative;padding:14px 14px 0}
.ss-dog__visual img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:2.5px solid var(--ink)}
.ss-dog__role{position:absolute;bottom:14px;left:26px;font-family:var(--display);font-weight:600;font-size:.78rem;background:var(--teal);color:var(--white);border:2.5px solid var(--ink);border-radius:999px;padding:6px 14px;transform:rotate(-2deg)}
.ss-dog__body{padding:20px 24px 26px}
.ss-dog__breed{font-size:.9rem;color:var(--ink-soft);font-weight:700;margin:2px 0 12px}
.ss-dog__specs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ss-dog__specs span{font-size:.78rem;font-weight:800;background:var(--paper);border:2px solid var(--ink);padding:4px 12px;border-radius:999px}
.ss-link{font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--teal-d);border-bottom:2.5px solid var(--sunshine)}
.ss-link:hover{color:var(--ink)}

/* ---------- page hero ---------- */
.ss-pagehero{padding:70px 0 40px;text-align:center;position:relative;overflow:hidden}
.ss-pagehero::before{content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:520px;height:400px;border-radius:50%;background:var(--sunshine);opacity:.3}
.ss-pagehero p{max-width:38rem;margin:16px auto 0;color:var(--ink-soft);font-weight:600;position:relative}
.ss-pagehero h1,.ss-pagehero .ss-kicker{position:relative}

/* ---------- steps ---------- */
.ss-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;counter-reset:sstep}
.ss-step{background:var(--white);border:3px solid var(--ink);border-radius:22px;padding:28px 24px;counter-increment:sstep;box-shadow:6px 6px 0 rgba(51,48,46,.12)}
.ss-step::before{content:counter(sstep);font-family:var(--display);font-weight:700;font-size:1.2rem;width:44px;height:44px;border-radius:50%;background:var(--sunshine);border:2.5px solid var(--ink);display:grid;place-items:center;margin-bottom:14px}
.ss-step h3{margin-bottom:6px;font-size:1.15rem}
.ss-step p{font-size:.92rem;color:var(--ink-soft);font-weight:600}

/* ---------- forms ---------- */
.ss-form{max-width:760px;margin:0 auto;display:grid;gap:32px}
.ss-fieldset{background:var(--white);border:3px solid var(--ink);border-radius:24px;box-shadow:7px 7px 0 rgba(51,48,46,.12);padding:34px;border-style:solid}
.ss-fieldset legend{font-family:var(--display);font-weight:600;font-size:1.3rem;background:var(--sunshine);border:2.5px solid var(--ink);border-radius:999px;padding:8px 22px;transform:rotate(-1deg)}
.ss-fieldset > p{font-size:.92rem;color:var(--ink-soft);font-weight:600;margin:14px 0 20px}
.ss-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ss-field{display:grid;gap:7px;margin-bottom:18px}
.ss-field:last-child{margin-bottom:0}
.ss-field label{font-weight:800;font-size:.9rem}
.ss-field label small{color:var(--coral);font-weight:800}
.ss-field input,.ss-field select,.ss-field textarea{font-family:var(--body);font-weight:600;font-size:.98rem;padding:13px 16px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);width:100%}
.ss-field input:focus,.ss-field select:focus,.ss-field textarea:focus{outline:none;background:var(--white);box-shadow:3px 3px 0 var(--sunshine)}
.ss-field textarea{min-height:110px;resize:vertical}
.ss-radio-row{display:flex;flex-wrap:wrap;gap:10px}
.ss-radio-row label{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:2.5px solid var(--ink);border-radius:999px;padding:9px 17px;font-size:.9rem;font-weight:800;cursor:pointer}
.ss-radio-row input{accent-color:var(--coral)}
.ss-radio-row label:has(input:checked){background:var(--sunshine)}
.ss-check{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;font-weight:600;margin-bottom:14px}
.ss-check input{width:19px;height:19px;margin-top:3px;accent-color:var(--coral);flex:none}
.ss-form__submit{text-align:center}
.ss-form__submit .ss-btn{font-size:1.1rem;padding:16px 40px}
.ss-form__note{font-size:.88rem;color:var(--ink-soft);font-weight:600;margin-top:14px}
.ss-success{background:var(--white);border:3px solid var(--ink);border-radius:24px;box-shadow:7px 7px 0 rgba(51,48,46,.14);padding:52px 40px;text-align:center;max-width:640px;margin:0 auto}
.ss-success svg{color:var(--teal);margin-bottom:16px}
.ss-success p{color:var(--ink-soft);font-weight:600;margin-top:12px}

/* ---------- footer ---------- */
.ss-footer{background:var(--teal);color:rgba(255,255,255,.9);margin-top:90px;border-top:3px solid var(--ink)}
.ss-footer__grid{max-width:var(--max);margin:0 auto;padding:60px 24px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.ss-footer h4{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--white);margin-bottom:14px}
.ss-footer .ss-logo{color:var(--white);margin-bottom:12px}
.ss-footer .ss-logo small{color:var(--sunshine)}
.ss-footer p,.ss-footer a{font-size:.94rem;font-weight:600}
.ss-footer li{margin-bottom:9px}
.ss-footer a:hover{color:var(--sunshine)}
.ss-footer__bar{border-top:2px solid rgba(255,255,255,.25);padding:20px 24px;text-align:center;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.7)}
.ss-footer__bar a{color:var(--sunshine)}

/* ---------- demo bar ---------- */
.kv-demobar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:90;background:var(--white);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;box-shadow:5px 5px 0 rgba(51,48,46,.2);display:flex;align-items:center;gap:6px;padding:8px 10px 8px 20px;font-size:.85rem;font-weight:700;white-space:nowrap}
.kv-demobar b{font-family:var(--display);font-weight:600}
.kv-demobar a{padding:8px 14px;border-radius:999px;font-weight:800}
.kv-demobar a:hover{background:var(--paper)}
.kv-demobar a.kv-demobar__cta{background:var(--coral);color:#fff}
@media(max-width:640px){.kv-demobar{font-size:.78rem;padding-left:14px;max-width:calc(100vw - 20px)}.kv-demobar span.kv-hide-sm{display:none}}

/* ---------- responsive ---------- */
@media(max-width:940px){
  .ss-hero__grid{grid-template-columns:1fr;gap:36px}
  .ss-collage{min-height:420px;max-width:480px;margin:0 auto;width:100%}
  .ss-footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
  .ss-nav{position:fixed;top:84px;left:16px;right:16px;background:var(--white);border:3px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 rgba(51,48,46,.16);flex-direction:column;align-items:stretch;padding:14px;display:none;z-index:70}
  .ss-nav.is-open{display:flex}
  .ss-nav a{padding:13px 18px;font-size:1.02rem;text-align:center}
  .ss-burger{display:grid}
  .ss-grid2{grid-template-columns:1fr}
  .ss-fieldset{padding:26px 20px}
  .ss-section{padding:62px 0}
}
@media(max-width:560px){
  .ss-footer__grid{grid-template-columns:1fr}
  .ss-collage{min-height:360px}
  .ss-polaroid--a{width:66%}
  .ss-polaroid--b{width:52%}
}