/* =========================================================
   PinkLitter Footer Restoration v1
   Restores the original responsive footer layout:
   - Desktop: compact wordmark + 3 columns
   - Tablet: desktop-like 4-column layout
   - Mobile: centered brand + tabbed footer navigation
   ========================================================= */

.footer{
  background:
    radial-gradient(circle at 18% 8%, rgba(255,79,138,.08) 0, rgba(255,79,138,0) 28%),
    radial-gradient(circle at 84% 16%, rgba(255,255,255,.035) 0, rgba(255,255,255,0) 24%),
    #0b0b0c !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
  padding:92px clamp(42px,5vw,78px) 0 !important;
  overflow:hidden !important;
}

.footer-top{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(260px,1.35fr) repeat(3,minmax(130px,.75fr)) !important;
  gap:clamp(34px,5vw,78px) !important;
  align-items:start !important;
  padding-bottom:42px !important;
  border-bottom:1px solid rgba(245,241,234,.16) !important;
}

.footer-top::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,rgba(255,79,138,0),rgba(255,79,138,.32),rgba(255,255,255,.08),rgba(255,79,138,0));
  opacity:.65;
  transform:translateY(-34px);
}

.footer-brand-block{
  max-width:330px !important;
}

.footer-brand-logo{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  max-width:250px !important;
  margin:0 0 1rem !important;
  text-decoration:none !important;
}

.footer-brand-logo-image{
  display:block !important;
  width:auto !important;
  height:52px !important;
  max-width:250px !important;
  max-height:52px !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 10px 18px rgba(255,79,138,.12)) !important;
}

.footer-tagline{
  max-width:320px !important;
  margin:0 0 2rem !important;
  color:rgba(245,241,234,.78) !important;
  font-size:1rem !important;
  line-height:1.8 !important;
  font-weight:300 !important;
}

.footer-col-title{
  color:#ff8baa !important;
  font-family:Jost, system-ui, sans-serif !important;
  font-size:.96rem !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  margin:0 0 1rem !important;
  text-shadow:0 0 18px rgba(255,79,138,.16) !important;
}

.footer-links{
  display:flex !important;
  flex-direction:column !important;
  gap:.72rem !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

.footer-links a,
.footer-mobile-links-list a{
  color:rgba(245,241,234,.82) !important;
  font-family:Jost, system-ui, sans-serif !important;
  font-size:.98rem !important;
  font-weight:500 !important;
  line-height:1.55 !important;
  text-decoration:none !important;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-mobile-links-list a:hover,
.footer-mobile-links-list a:focus-visible{
  color:#ff8baa !important;
}

.footer-social{
  display:flex !important;
  gap:.55rem !important;
  flex-wrap:wrap !important;
}

.footer-social .social-link{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.045) !important;
  color:rgba(255,255,255,.88) !important;
  font-size:.72rem !important;
  font-weight:700 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.footer-social .social-link:hover,
.footer-social .social-link:focus-visible{
  background:#ff4f8a !important;
  border-color:#ff4f8a !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
  box-shadow:0 14px 28px rgba(255,79,138,.18) !important;
}

.footer-brand-copyright,
.footer-copyright{
  margin:1.15rem 0 0 !important;
  padding:0 !important;
  max-width:none !important;
  color:rgba(245,241,234,.62) !important;
  font-size:.78rem !important;
  line-height:1.55 !important;
  text-align:left !important;
}

.footer-mobile-nav{
  display:none !important;
}

/* Tablet: keep desktop-style 4 columns, but compress gently. */
@media (min-width:768px) and (max-width:1180px){
  .footer{
    padding:78px 32px 0 !important;
  }

  .footer-top{
    grid-template-columns:minmax(210px,1.15fr) repeat(3,minmax(95px,.8fr)) !important;
    gap:24px !important;
    padding-bottom:34px !important;
  }

  .footer-brand-block{
    max-width:250px !important;
  }

  .footer-brand-logo{
    max-width:220px !important;
    margin-bottom:.9rem !important;
  }

  .footer-brand-logo-image{
    height:42px !important;
    max-height:42px !important;
    max-width:220px !important;
  }

  .footer-tagline{
    max-width:240px !important;
    font-size:.82rem !important;
    line-height:1.65 !important;
    margin-bottom:1.25rem !important;
  }

  .footer-col-title{
    font-size:.76rem !important;
    letter-spacing:.07em !important;
    margin-bottom:.8rem !important;
  }

  .footer-links{
    gap:.52rem !important;
  }

  .footer-links a{
    font-size:.78rem !important;
    line-height:1.45 !important;
  }

  .footer-social .social-link{
    width:34px !important;
    height:34px !important;
    font-size:.64rem !important;
  }

  .footer-brand-copyright,
  .footer-copyright{
    font-size:.66rem !important;
  }

  .footer-desktop-column{
    display:block !important;
  }

  .footer-mobile-nav{
    display:none !important;
  }
}

/* Mobile: centered brand + tab buttons, matching the original mobile footer. */
@media (max-width:767px){
  .footer{
    padding:72px 20px 0 !important;
    text-align:center !important;
  }

  .footer-top{
    grid-template-columns:1fr !important;
    gap:1rem !important;
    padding-bottom:1.25rem !important;
    text-align:center !important;
  }

  .footer-top::before{
    left:18px;
    right:18px;
    transform:translateY(-28px);
  }

  .footer-brand-block{
    display:block !important;
    max-width:100% !important;
    text-align:center !important;
  }

  .footer-brand-logo{
    display:inline-flex !important;
    justify-content:center !important;
    max-width:220px !important;
    margin:0 auto 1rem !important;
  }

  .footer-brand-logo-image{
    height:44px !important;
    max-height:44px !important;
    max-width:220px !important;
    margin:0 auto !important;
  }

  .footer-tagline{
    max-width:320px !important;
    margin:0 auto 1.45rem !important;
    font-size:.95rem !important;
    line-height:1.75 !important;
    text-align:center !important;
  }

  .footer-social{
    justify-content:center !important;
  }

  .footer-brand-copyright,
  .footer-copyright{
    text-align:center !important;
    margin:1.15rem auto 0 !important;
    font-size:.72rem !important;
  }

  .footer-desktop-column{
    display:none !important;
  }

  .footer-mobile-nav{
    display:block !important;
    margin-top:1rem !important;
  }

  .footer-mobile-tab-row{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .footer-mobile-tab{
    appearance:none !important;
    border:1px solid rgba(245,241,234,.12) !important;
    background:rgba(255,255,255,.03) !important;
    color:var(--ivory) !important;
    border-radius:14px !important;
    padding:.8rem .5rem !important;
    font-family:Jost, system-ui, sans-serif !important;
    font-size:.68rem !important;
    font-weight:700 !important;
    letter-spacing:.12em !important;
    line-height:1.15 !important;
    text-transform:uppercase !important;
    text-align:center !important;
  }

  .footer-mobile-tab.is-open{
    background:rgba(255,79,138,.14) !important;
    border-color:rgba(255,79,138,.35) !important;
    color:#ff8baa !important;
  }

  .footer-mobile-panels{
    margin-top:.75rem !important;
    padding-bottom:.35rem !important;
  }

  .footer-mobile-panel{
    border:1px solid rgba(245,241,234,.1) !important;
    background:rgba(255,255,255,.03) !important;
    border-radius:16px !important;
    padding:.9rem 1rem !important;
  }

  .footer-mobile-links-list{
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    gap:.55rem !important;
  }

  .footer-mobile-links-list a{
    font-size:.82rem !important;
    line-height:1.3 !important;
  }
}

/* =========================================================
   Mobile newsletter-to-footer seam fix v2
   Mobile only: keeps desktop/tablet untouched.
   - Match the newsletter copy background to the banner pink.
   - Remove the visible divider/seam between the cat strip and form area.
   - Enlarge the cat/banner crop on mobile so it does not look tiny.
   ========================================================= */
@media (max-width:767px){
  body.home .plx-newsletter,
  html body.home .plx-newsletter,
  html body:has(.shop-archive-section) .plx-newsletter{
    background:#f3d1db !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  body.home .plx-newsletter-bg,
  html body.home .plx-newsletter-bg,
  html body:has(.shop-archive-section) .plx-newsletter-bg{
    display:block !important;
    width:100% !important;
    height:154px !important;
    min-height:154px !important;
    object-fit:cover !important;
    object-position:left top !important;
    margin:0 0 -2px !important;
    padding:0 !important;
    line-height:0 !important;
  }

  body.home .plx-newsletter-copy,
  html body.home .plx-newsletter-copy,
  html body:has(.shop-archive-section) .plx-newsletter-copy{
    background:#f3d1db !important;
    margin-top:0 !important;
    padding-top:16px !important;
    border-top:0 !important;
    box-shadow:none !important;
  }
}

@media (max-width:420px){
  body.home .plx-newsletter-bg,
  html body.home .plx-newsletter-bg,
  html body:has(.shop-archive-section) .plx-newsletter-bg{
    height:168px !important;
    min-height:168px !important;
    object-position:left top !important;
  }
}