*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito',sans-serif;color:#3a302b;background:#fff;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
input,textarea,select,button{font-family:'Nunito',sans-serif}

@keyframes pawfloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(-8deg)}}
@keyframes pawfloat2{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-12px) rotate(10deg)}}
@keyframes bobbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeup{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Nav */
.nav-link:hover{color:#e3271d}
.nav-active{color:#f08a24;border-bottom:2px solid #f08a24;padding-bottom:2px}
.nav-dropdown:hover .nav-dropdown-menu{display:flex!important}
.nav-dropdown-menu a:hover{background:#f3f6fb;color:#1e5aa8}
.social-btn:hover{background:#e3271d!important;transform:translateY(-3px)}

/* FAQ accordion */
.faq-item{border-bottom:1px solid #ededed}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;cursor:pointer;user-select:none;background:#fff;transition:background .15s}
.faq-question:hover{background:#fafafa}
.faq-question.open{background:#fafafa}
.faq-answer{display:none;padding:6px 24px 22px;font-size:14px;color:#6a5a53;line-height:1.8}
.faq-answer.open{display:block}
.faq-sign{font-size:22px;font-weight:400;color:#3a302b;line-height:1;flex-shrink:0}

/* Tabs */
.tab-btn{flex:1;padding:10px 6px;border:none;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;background:#fff;color:#3a302b;transition:background .2s,color .2s}
.tab-btn:not(:first-child){border-left:1px solid #dde4ef}
.tab-btn.active{background:#1e5aa8;color:#fff}

/* Blog chips */
.cat-chip{border:1px solid #d9e2ef;background:#fff;color:#5c4a44;font-family:'Nunito',sans-serif;font-weight:700;font-size:14px;padding:8px 20px;border-radius:30px;cursor:pointer;transition:all .2s}
.cat-chip.active{background:#1e5aa8;color:#fff;border-color:#1e5aa8}
.cat-chip:hover{background:#1e5aa8;color:#fff;border-color:#1e5aa8}

/* Post cards */
.post-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.08);transition:transform .25s,box-shadow .25s}
.post-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(30,90,168,.16)}
.post-card[data-hidden]{display:none}

/* Forms */
input:focus,textarea:focus{border-color:#1e5aa8!important;outline:none}
button:hover{opacity:.9}

/* Contact form */
.contact-input{width:100%;padding:14px 18px;border:1px solid #ddd;border-radius:6px;font-size:15px;outline:none;transition:border-color .2s;font-family:'Nunito',sans-serif}
.contact-input:focus{border-color:#1e5aa8}
.contact-btn{width:100%;background:#1e5aa8;color:#fff;font-weight:800;font-size:16px;padding:15px;border:none;border-radius:6px;cursor:pointer;letter-spacing:.5px;transition:background .2s}
.contact-btn:hover{background:#e3271d}

/* Ingredient / benefit cards hover */
.ingredient-card:hover{transform:translateY(-6px)}
.ingredient-card{transition:transform .25s;text-align:center}
.brand-card:hover{transform:translateY(-8px)}
.brand-card{transition:transform .25s}
.value-card:hover{transform:translateY(-8px)}
.value-card{background:#fff;border-radius:20px;padding:36px 24px;box-shadow:0 8px 24px rgba(0,0,0,.06);transition:transform .25s}

/* Testimonials */
.testimonial:hover{transform:translateY(-6px)}
.testimonial{transition:transform .25s}

/* ── Hamburger & mobile nav ── */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:201;padding:4px;background:none;border:none}
.hamburger span{display:block;width:24px;height:2.5px;border-radius:2px;transition:transform .3s,opacity .3s;background:currentColor}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mobile-nav-overlay{display:none;position:fixed;inset:0;background:#fff;z-index:150;flex-direction:column;padding:86px 28px 50px;overflow-y:auto;gap:0}
.mobile-nav-overlay.open{display:flex}
.mob-nav-link{font-size:18px;font-weight:700;color:#3a302b;padding:15px 0;border-bottom:1px solid #f0ece9;text-decoration:none;display:block}
.mob-section-label{font-size:18px;font-weight:700;color:#3a302b;padding:15px 0 6px;border-bottom:1px solid #f0ece9}
.mob-nav-sub{padding:0 0 6px 18px;background:#fafafa}
.mob-nav-sub a{display:block;font-size:15px;font-weight:600;color:#5c4a44;padding:10px 0;text-decoration:none;border-bottom:1px solid #f0ece9}
.mob-nav-sub a:last-child{border-bottom:none}
.mob-nav-cta{display:block;margin-top:24px;background:#1e5aa8;color:#fff;font-weight:800;font-size:16px;text-align:center;padding:15px;border-radius:30px;text-decoration:none}

/* ── Mobile responsive ── */
@media(max-width:768px){
  /* Nav */
  .desktop-nav{display:none!important}
  .hamburger{display:flex}

  /* Hero home */
  .home-hero{padding:80px 20px 0!important;background:#e5a8a6!important}
  .hero-grid{grid-template-columns:1fr!important;gap:0!important}
  .hero-text-right{display:none!important}
  .hero-center-spacer{min-height:380px!important}
  .hero-text-left{text-align:center!important;padding-bottom:10px!important}
  .hero-cta{display:none!important}
  .hero-text-left p{margin-left:auto!important;margin-right:auto!important;max-width:300px!important}

  /* Featured products */
  .feat-panel{height:auto!important;min-height:unset!important;display:flex!important;flex-direction:row!important}
  .feat-bg-diagonal,.feat-photo{display:none!important}
  .feat-product{position:static!important;width:50%!important;left:auto!important;right:auto!important;top:auto!important;padding:24px 12px!important;background:rgba(20,30,80,.55)!important;flex:1!important}
  .feat-product:first-of-type{background:#c41d15!important}

  /* Footer grids */
  .footer-grid-4{grid-template-columns:1fr 1fr!important}
  .footer-grid-3{grid-template-columns:1fr!important;text-align:center}
  .footer-grid-3 form{max-width:100%!important}
  .footer-grid-3 .footer-mascot{display:none}

  /* General cols */
  .two-col{grid-template-columns:1fr!important}
  .three-col{grid-template-columns:1fr!important}
  .brands-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
  .brands-grid .brand-card{background:#f9f5f3;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:0 0 10px}
  .brands-grid .brand-card img{width:100%;height:110px;object-fit:cover;border-radius:12px 12px 0 0}
  .brands-grid .brand-card p{font-size:10px!important;line-height:1.4!important;padding:6px 6px 0!important;margin-top:6px!important;color:#6c5c55}
  .four-col{grid-template-columns:repeat(2,1fr)!important}
  .six-col{grid-template-columns:repeat(2,1fr)!important}
  .five-col{grid-template-columns:repeat(2,1fr)!important}

  /* Spotty / Spotty Plus hero text hidden on mobile */
  .spotty-hero-text{display:none!important}

  /* Spotty Plus products */
  .splus-images{gap:6px!important;margin-bottom:16px!important}
  .splus-images img{height:160px!important;width:auto!important}
  .splus-cards{grid-template-columns:1fr!important;gap:10px!important}

  /* Spotty products fixed grid */
  .prod-grid{grid-template-columns:1fr 1fr!important;grid-template-rows:auto auto!important;gap:12px!important}
  .prod-images{grid-column:1/-1!important;order:-1!important;justify-content:center!important}
  .prod-images img{height:200px!important}
  .prod-card{padding:16px 14px!important}

  /* Spotty feeding table: horizontal scroll */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-scroll table{min-width:520px}
}