@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Sora:wght@600;700;800&display=swap');
@import url('/styles/shark-theme-core-20260808.css?v=20260808');

/* 2026-08-08 public Home normalization. Loaded last on purpose. */
:root{
  --shark-modern-body:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shark-modern-display:'Sora','Manrope',system-ui,sans-serif;
}

html body{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  overflow-x:hidden!important;
  font-family:var(--shark-modern-body)!important;
}

html body .footer-social,
html body .hero-carousel,
html body .hero-gif-square{
  display:none!important;
}

/* ===== HERO: larger brand, modern typography, no empty media ===== */
html body .hero.hero-redesigned{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  box-sizing:border-box!important;
}

html body .hero-top-content{
  width:min(100%,980px)!important;
  max-width:980px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  gap:.55rem!important;
}

html body #heroLogoWrap{
  position:relative!important;
  inset:auto!important;
  margin:0 auto!important;
  flex:0 0 auto!important;
}

html body #heroLogoWrap img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}

html body .hero-sub{
  font-family:var(--shark-modern-body)!important;
  font-weight:600!important;
  letter-spacing:-.02em!important;
  text-wrap:balance!important;
}

html body .hero-stars{
  font-family:var(--shark-modern-display)!important;
  font-weight:700!important;
  letter-spacing:-.015em!important;
}

html body .hero-proof{
  font-family:var(--shark-modern-body)!important;
}

html body .hero-proof .hp-num{
  font-family:var(--shark-modern-display)!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
}

html body .hero-proof .hp-lbl{
  font-family:var(--shark-modern-body)!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
}

html body .hero-sub,
html body .hero-stars,
html body .hero-proof{
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  justify-content:center!important;
}

html body .btn-ig,
html body .btn-delivery,
html body .hero-cta-btn{
  min-height:54px!important;
  border-radius:16px!important;
  font-family:var(--shark-modern-display)!important;
  font-size:1rem!important;
  font-weight:700!important;
  letter-spacing:-.015em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}

html body .btn-ig{
  width:min(100%,520px)!important;
  padding:.9rem 1.4rem!important;
  margin:.8rem auto 0!important;
  background:linear-gradient(135deg,#833AB4 0%,#C13584 42%,#E1306C 68%,#F77737 100%)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  color:#fff!important;
  box-shadow:0 12px 32px rgba(193,53,132,.32)!important;
}

html body .btn-ig:hover,
html body .btn-delivery:hover,
html body .hero-cta-btn:hover{
  transform:translateY(-2px)!important;
  filter:brightness(1.06)!important;
}

html body .delivery-apps-section{
  width:min(100%,700px)!important;
  max-width:700px!important;
  margin:.5rem auto 0!important;
  padding:.6rem 1rem!important;
  text-align:center!important;
  box-sizing:border-box!important;
}

html body .delivery-apps-msg{
  font-family:var(--shark-modern-body)!important;
  font-weight:700!important;
  letter-spacing:-.015em!important;
}

html body .delivery-apps-btns{
  width:min(100%,520px)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}

html body .btn-delivery{
  width:100%!important;
  margin:0!important;
  padding:.85rem 1rem!important;
}

html body .hero-cta-btn{
  width:min(100%,520px)!important;
  margin:.45rem auto 0!important;
  padding:.9rem 1.4rem!important;
}

/* ===== MENU: proportional product cards ===== */
html body .menu-section{
  box-sizing:border-box!important;
}

html body .section-title,
html body .pizza-builder-title,
html body .card-name{
  font-family:var(--shark-modern-display)!important;
}

html body .card,
html body .card-desc,
html body .card-price,
html body .size-option,
html body .flavor-item{
  font-family:var(--shark-modern-body)!important;
}

html body .card{
  width:100%!important;
  min-width:0!important;
}

html body .card-img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  overflow:hidden!important;
  background:#07111d!important;
}

html body .card-img img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Pizza builder gets more visual weight than regular cards. */
html body #s-pizza,
html body #pizzaBuilderContainer{
  width:100%!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

html body #s-pizza .pizza-builder{
  width:min(100%,1000px)!important;
  margin:0 auto!important;
}

html body #s-pizza .size-option{
  min-height:92px!important;
  padding:1.05rem 1.2rem!important;
}

html body #s-pizza .size-option-name{
  font-family:var(--shark-modern-display)!important;
  font-size:1.08rem!important;
  font-weight:700!important;
}

html body #s-pizza .size-option-price{
  font-family:var(--shark-modern-display)!important;
  font-size:1.2rem!important;
  font-weight:800!important;
}

/* Treat laptop/desktop widths as desktop from 768px, not 900px. */
@media (min-width:768px){
  html body .hero.hero-redesigned{
    padding:4px 24px 30px!important;
    gap:12px!important;
  }

  html body #heroLogoWrap{
    width:clamp(360px,38vw,520px)!important;
    height:clamp(360px,38vw,520px)!important;
    margin-top:-18px!important;
    margin-bottom:-12px!important;
  }

  html body .hero-sub{
    width:min(100%,920px)!important;
    max-width:920px!important;
    margin:0 auto!important;
    font-size:clamp(1.18rem,1.65vw,1.42rem)!important;
    line-height:1.52!important;
  }

  html body .hero-stars{
    margin-top:.15rem!important;
    font-size:clamp(1.02rem,1.3vw,1.16rem)!important;
  }

  html body .hero-proof{
    width:auto!important;
    max-width:680px!important;
    margin-top:.45rem!important;
    gap:1.6rem!important;
    padding:.8rem 1.15rem!important;
    border-radius:16px!important;
  }

  html body .hero-proof .hp-num{
    font-size:clamp(1.12rem,1.5vw,1.3rem)!important;
  }

  html body .hero-proof .hp-lbl{
    font-size:.72rem!important;
  }

  html body .btn-ig,
  html body .btn-delivery,
  html body .hero-cta-btn{
    min-height:58px!important;
    font-size:1.04rem!important;
  }

  html body .delivery-apps-msg{
    font-size:.96rem!important;
    margin-bottom:.7rem!important;
  }

  html body #s-pizza{
    padding:28px!important;
  }

  html body #s-pizza .pizza-builder{
    padding:1.5rem!important;
    border-radius:22px!important;
  }

  html body #s-pizza .size-options{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
  }

  html body #s-pizza .size-option{
    min-height:132px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:.5rem!important;
  }

  html body #s-pizza .size-option-price{
    font-size:1.42rem!important;
    margin-top:.25rem!important;
  }
}

@media (min-width:768px) and (max-width:1099px){
  html body .menu-section:not(#s-pizza){
    width:calc(100% - 40px)!important;
    margin:0 auto!important;
    padding:24px 0 12px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
    align-items:stretch!important;
  }

  html body .menu-section:not(#s-pizza) > .section-title{
    grid-column:1/-1!important;
  }

  html body .menu-section:not(#s-pizza) > .card{
    margin:0!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }
}

@media (min-width:1100px){
  html body .menu-section:not(#s-pizza){
    width:min(1180px,calc(100% - 48px))!important;
    max-width:1180px!important;
    margin:0 auto!important;
    padding:24px 0 12px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:24px!important;
    align-items:stretch!important;
  }

  html body .menu-section:not(#s-pizza) > .section-title{
    grid-column:1/-1!important;
  }

  html body .menu-section:not(#s-pizza) > .card{
    margin:0!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }
}

@media (max-width:767px){
  html body .hero.hero-redesigned{
    padding:4px 14px 24px!important;
    gap:10px!important;
  }

  html body #heroLogoWrap{
    width:min(82vw,330px)!important;
    height:min(82vw,330px)!important;
    margin-top:-12px!important;
    margin-bottom:-8px!important;
  }

  html body .hero-top-content{
    padding:0!important;
  }

  html body .hero-sub{
    width:min(100%,38rem)!important;
    max-width:38rem!important;
    padding:0 .35rem!important;
    font-size:1rem!important;
    line-height:1.55!important;
  }

  html body .hero-stars{
    font-size:.96rem!important;
  }

  html body .hero-proof{
    gap:.8rem!important;
    padding:.65rem .8rem!important;
  }

  html body .hero-proof .hp-num{
    font-size:1rem!important;
  }

  html body .hero-proof .hp-lbl{
    font-size:.58rem!important;
  }

  html body .btn-ig,
  html body .hero-cta-btn{
    width:min(100%,440px)!important;
  }

  html body .delivery-apps-section{
    width:min(100%,470px)!important;
  }

  html body .delivery-apps-btns{
    width:100%!important;
  }
}

@media (max-width:520px){
  html body .delivery-apps-btns{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  html body .btn-ig,
  html body .btn-delivery,
  html body .hero-cta-btn{
    min-height:50px!important;
    font-size:.9rem!important;
  }

  html body .card-img{
    aspect-ratio:16/10!important;
  }
}