:root {
      --peanut: #8b4f27;
      --peanut-dark: #633419;
      --cream: #fff9e9;
      --yellow: #ffd84d;
      --orange: #f59b45;
      --orange-dark: #dc7431;
      --teal: #52c8bd;
      --teal-dark: #24978d;
      --pink: #f58ca6;
      --ink: #3d3029;
      --white: #ffffff;
      --shadow: 0 14px 35px rgba(82, 51, 31, .13);
      --radius: 28px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--cream);
      font-family: "Nunito", sans-serif;
      line-height: 1.6;
    }

    h1, h2, h3, .logo, .nav-cta {
      font-family: "Baloo 2", cursive;
      line-height: 1.05;
      margin: 0;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .container {
      width: min(1120px, calc(100% - 40px));
      margin: auto;
    }

    /* Header */

    header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 249, 233, .94);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(99, 52, 25, .08);
    }

    nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .logo {
      color: var(--peanut);
      font-size: 1.65rem;
      display: flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
    }

    .logo-paw {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--yellow);
      transform: rotate(-8deg);
      font-size: 22px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      font-weight: 800;
      color: var(--peanut-dark);
    }

    .nav-links a:hover {
      color: var(--orange-dark);
    }

    .nav-cta {
      background: var(--peanut);
      color: white;
      padding: 11px 20px;
      border-radius: 999px;
      font-size: 1.05rem;
      box-shadow: 0 5px 0 var(--peanut-dark);
    }

    .menu-btn {
      display: none;
      border: 0;
      background: var(--yellow);
      border-radius: 12px;
      padding: 9px 12px;
      font-size: 22px;
      cursor: pointer;
    }

    /* Hero */

    .shop-hero {
      position: relative;
      overflow: hidden;
      min-height: 610px;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 90px 0;
      background:
        radial-gradient(circle at 15% 20%, rgba(82, 200, 189, .25) 0 100px, transparent 101px),
        radial-gradient(circle at 88% 75%, rgba(255, 216, 77, .7) 0 120px, transparent 121px),
        var(--cream);
    }

    .shop-hero::before,
    .shop-hero::after {
      position: absolute;
      font-size: 55px;
      opacity: .14;
    }

    .shop-hero::before {
      content: "🐾";
      left: 8%;
      top: 18%;
      transform: rotate(-20deg);
    }

    .shop-hero::after {
      content: "🦴";
      right: 8%;
      bottom: 17%;
      transform: rotate(20deg);
    }

    .hero-content {
      max-width: 760px;
      position: relative;
      z-index: 2;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--yellow);
      color: var(--peanut-dark);
      padding: 7px 15px;
      border-radius: 999px;
      font-weight: 900;
      margin-bottom: 20px;
      transform: rotate(-1deg);
    }

    .shop-hero h1 {
      color: var(--peanut);
      font-size: clamp(3.5rem, 8vw, 6rem);
      letter-spacing: -2px;
    }

    .shop-hero h1 span {
      color: var(--teal-dark);
    }

    .hero-content > p {
      max-width: 650px;
      margin: 24px auto 30px;
      font-size: 1.25rem;
    }

    /* Coming soon card */

    .coming-soon {
      width: min(650px, 100%);
      margin: 35px auto 0;
      padding: 34px;
      background: white;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border: 3px dashed var(--orange);
      transform: rotate(-1deg);
    }

    .coming-icon {
      font-size: 58px;
      margin-bottom: 5px;
    }

    .coming-soon h2 {
      color: var(--peanut);
      font-size: 2.5rem;
    }

    .coming-soon p {
      margin: 12px auto 0;
      max-width: 520px;
    }

    /* In-person section */

    .in-person {
      background: var(--teal);
      padding: 85px 0;
      position: relative;
      overflow: hidden;
    }

    .in-person-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 55px;
      align-items: center;
    }

    .big-paw {
      width: 280px;
      height: 280px;
      margin: auto;
      border-radius: 50%;
      background: var(--yellow);
      border: 9px solid white;
      display: grid;
      place-items: center;
      font-size: 130px;
      box-shadow: var(--shadow);
      transform: rotate(5deg);
    }

    .in-person-copy h2 {
      color: white;
      font-size: clamp(2.7rem, 5vw, 4.2rem);
    }

    .in-person-copy p {
      font-size: 1.15rem;
      color: #174f4a;
      margin: 18px 0;
    }

    .in-person-note {
      background: white;
      padding: 22px 25px;
      border-radius: 20px;
      box-shadow: var(--shadow);
      margin-top: 25px;
    }

    .in-person-note strong {
      color: var(--peanut);
      font-size: 1.15rem;
    }

    /* Treat preview */

    .treats {
      padding: 90px 0;
      background: white;
    }

    .section-heading {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 45px;
    }

    .section-heading h2 {
      color: var(--peanut);
      font-size: clamp(2.7rem, 5vw, 4rem);
    }

    .section-heading p {
      font-size: 1.1rem;
      margin-top: 14px;
    }

    .treat-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
    }

    .treat-card {
      background: var(--cream);
      border-radius: var(--radius);
      padding: 30px;
      box-shadow: var(--shadow);
    }

    .treat-card-top {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 15px;
    }

    .treat-icon {
      width: 74px;
      height: 74px;
      flex: 0 0 74px;
      border-radius: 22px;
      display: grid;
      place-items: center;
      font-size: 38px;
      background: var(--yellow);
      transform: rotate(-4deg);
    }

    .treat-card:nth-child(2) .treat-icon {
      background: #ffd0a5;
      transform: rotate(5deg);
    }

    .treat-card h3 {
      color: var(--peanut);
      font-size: 2rem;
    }

    .tagline {
      font-weight: 900;
      color: var(--teal-dark);
    }

    .ingredients {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }

    .ingredient {
      background: white;
      border: 1px solid #eadfca;
      padding: 6px 11px;
      border-radius: 999px;
      font-size: .88rem;
      font-weight: 800;
    }

    /* Final CTA */

    .cta {
      padding: 75px 0;
      background: var(--peanut);
      color: white;
      text-align: center;
    }

    .cta h2 {
      color: var(--yellow);
      font-size: clamp(2.7rem, 5vw, 4rem);
    }

    .cta p {
      max-width: 650px;
      margin: 15px auto 28px;
      font-size: 1.15rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 23px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 1.05rem;
      border: 2px solid transparent;
    }

    .btn-primary {
      background: var(--yellow);
      color: var(--peanut-dark);
      box-shadow: 0 6px 0 #d7a900;
    }

    /* Footer */

    footer {
      background: #3a2418;
      color: #f7ead8;
      padding: 42px 0;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px;
    }

    footer .logo {
      color: var(--yellow);
    }

    footer p {
      margin: 5px 0 0;
      font-size: .92rem;
    }

    .footer-paw {
      font-size: 42px;
    }

    /* Responsive */

    @media (max-width: 850px) {
      .nav-links {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        background: var(--cream);
        padding: 20px;
        flex-direction: column;
        border-bottom: 1px solid rgba(99,52,25,.1);
      }

      .nav-links.open {
        display: flex;
      }

      .menu-btn {
        display: block;
      }

      .nav-cta {
        display: none;
      }

      .in-person-grid {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .in-person-copy p {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
      }

      .in-person-note {
        text-align: left;
      }
    }

    @media (max-width: 650px) {
      .container {
        width: min(100% - 28px, 1120px);
      }

      .shop-hero {
        min-height: 560px;
        padding: 65px 0;
      }

      .shop-hero h1 {
        letter-spacing: -1px;
      }

      .coming-soon {
        padding: 25px 20px;
      }

      .treat-grid {
        grid-template-columns: 1fr;
      }

      .big-paw {
        width: 220px;
        height: 220px;
        font-size: 100px;
      }

      .footer-inner {
        flex-direction: column;
        text-align: center;
      }
    }