body {
    margin: 0;
    /*height: 100vh;*/
    background-color: #fff5e6;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
  }
  img {
    /*max-width: 60%;
    max-height: 60%;*/
  }
  :root{
    --wa-bg: #25D366;          /* circle color; change to your brand if you like */
    --wa-size: 64px;           /* 48px+ for touch targets */
    --wa-shadow: 0 6px 18px rgba(0,0,0,.18);
  }
  .wa-float{
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: var(--wa-size);
    height: var(--wa-size);
    border-radius: 50%;
    background: var(--wa-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--wa-shadow);
    z-index: 9999;
    text-decoration: none;
  }
  .wa-float img{
    width: 60%;               /* scale inside the circle */
    height: 60%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 0 transparent); /* avoids Safari blur */
    pointer-events: none;     /* clicks pass to the <a> */
  }
  .wa-float:focus-visible{
    outline: 3px solid #000; outline-offset: 3px;
  }
  @media (pointer:fine){
    .wa-float{ transition: transform .15s ease, box-shadow .15s ease; }
    .wa-float:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
  }
  /* Make the WhatsApp button larger on phones/tablets */
  @media (hover: none) and (pointer: coarse) {
    :root { --wa-size: 128px; }   /* try 72–80px */
    .wa-float img { width: 62%; height: 62%; } /* keep icon balanced */
  }

  /* If you want it even larger on very small screens */
  @media (max-width: 360px) and (hover: none) and (pointer: coarse) {
    :root { --wa-size: 80px; }
  }

.subtitle-text {
    font-family: "Special Gothic Expanded One";
    font-size: 4rem;
    color: #ff3800;
}

.category-text {
    font-family: "Special Gothic Expanded One";
    font-size: 1.5rem;
    color: #1f1f1f;
    text-decoration: none;
}

.order-image {
    max-height: 64px;
    width:auto;
    border-radius: 6px;
}

@font-face {
  font-family: "Special Gothic";
  src: url("../fonts/SpecialGothic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Special Gothic Condensed One";
  src: url("../fonts/SpecialGothicCondensedOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Special Gothic Expanded One";
  src: url("../fonts/SpecialGothicExpandedOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.site-footer div {
    font-family: "Special Gothic Condensed One";
    font-size: 1.5rem;
    color: #1f1f1f;
}