:root{
  --bg: #f59e0b;          /* orange like your screenshot */
  --card: transparent;

  --btn: #6b1f14;         /* dark red/brown */
  --btn-hover: #7a261a;
  --btn-shadow: rgba(0,0,0,.25);

  --text: rgba(255,255,255,.95);
  --muted: rgba(255,255,255,.88);

  --white: #ffffff;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
}

.page{
  min-height: 100%;
  display: grid;
  place-items: start center;
  padding: 0 14px 34px;
  margin-top: 0;
}

.card{
  width: min(560px, 100%);
  margin-top: 0;
}

.hero{
  position: relative;
  text-align: center;
  padding: 0 10px 8px;
  margin-top: 0;
}

.top-actions{
  position: absolute;
  top: 12px;
  display: flex;
  gap: 10px;
  padding: 0;
  z-index: 10;
}
.top-actions--right{
  right: 10px;
  justify-content: flex-end;
}
.top-actions--left{
  left: 10px;
  justify-content: flex-start;
}

.top-action{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.72);
  color: rgba(0,0,0,.75);
  display: grid;
  place-items: center;
  font-size: 15.5px;
  box-shadow: 0 10px 22px rgba(0,0,0,.15);
}
.top-action img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.top-action--mirrored{
  transform: scaleY(-1);
}

.logo-wrap{
  display: grid;
  place-items: center;
  margin-top: 18px;
  margin-bottom: 16px;
}

.logo-frame{
  width: 198px;
  height: 198px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.logo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  transform-origin: center;
  display: block;
}

.logo-fallback{
  width: 198px;
  height: 198px;
  border-radius: 999px;
  background: #4b0f0a;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.logo-fallback strong{ font-size: 22px; }

.title{
  margin: 0;
  font-size: 27.5px;
  line-height: 1.1;
  font-weight: 800;
  text-shadow: 0 2px 0 rgba(0,0,0,.08);
}

.subtitle{
  margin: 10px auto 0;
  max-width: 26ch;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--muted);
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.links{
  margin-top: 18px;
  display: grid;
  gap: 14px;
  padding: 0 6px;
}

.link{
  display: grid;
  grid-template-columns: 58px 1fr 34px;
  align-items: center;

  background: var(--btn);
  color: var(--text);
  text-decoration: none;

  min-height: 66px;
  border-radius: 12px;
  box-shadow: 0 12px 20px var(--btn-shadow);
  overflow: hidden;
  transition: transform .08s ease, background .12s ease;
}

.link:hover{
  background: var(--btn-hover);
  transform: translateY(-1px);
}

.link-icon{
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 24.5px;
  opacity: .95;
  padding: 8px;
}
.link-icon-circle{
  width: 100%;
  height: 100%;
  max-width: 44px;
  max-height: 44px;
  aspect-ratio: 1 / 1;
  background: var(--white);
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 6px;
}

.link-icon-circle img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.link-icon svg{
  width: 30px;
  height: 30px;
}
.link-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.link-text{
  text-align: center;
  font-weight: 700;
  font-size: 15.5px;
  padding: 0 10px;
}

.link-more{
  text-align: center;
  font-size: 18.5px;
  opacity: .85;
}

.footer{
  margin-top: 22px;
  display: grid;
  place-items: center;
}

.footer-btn{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.75);
  padding: 16px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15.5px;
  box-shadow: 0 16px 28px rgba(0,0,0,.18);
}
.footer-btn:hover{
  filter: brightness(0.98);
}

.nutrition-wrap{
  padding: 6px 10px 0;
  display: grid;
  place-items: center;
}

.nutrition_facts{
  width: min(360px, 100%);
  background: #ffffff;
  color: #000000;
  border-radius: 0;
  padding: 10px 12px 8px;
  border: 3px solid #000000;
  box-shadow: none;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.1;
  display: flow-root;
}

.nutrition_facts .heading{
  font-weight: 900;
  text-transform: uppercase;
  text-align: left;
  font-size: 22px;
  letter-spacing: .4px;
  margin: 0 0 4px;
}

.nutrition_facts .divider{
  width: 100%;
  background: #000000;
  margin: 4px 0;
  clear: both;
}
.nutrition_facts .divider.thin{ height: 1px; opacity: 1; }
.nutrition_facts .divider.medium{ height: 2px; }
.nutrition_facts .divider.thick{ height: 6px; }

.nutrition_facts .serving_size{
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .2px;
}
.nutrition_facts .serving_size_label{
  float: left;
  width: 50%;
}
.nutrition_facts .serving_size_value{
  float: right;
  width: 50%;
  text-align: right;
}

.nutrition_facts .nutrient{
  font-size: 13px;
  line-height: 1.1;
  padding: 2px 0;
  width: 50%;
}
.nutrition_facts .nutrient.left{ float: left; }
.nutrition_facts .nutrient.right{ float: right; }
.nutrition_facts .nutrient.sub{
  padding-left: 14px;
  font-size: 12px;
}
.nutrition_facts .nutrient.header{
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  padding-top: 6px;
  letter-spacing: .2px;
}
.nutrition_facts .tRight{ text-align: right; }

/* Utility classes (used by bovine-nt.html) */
.min-h-100{ min-height: 100%; }
.grid{ display: grid; }
.flex{ display: flex; }
.place-start-center{ place-items: start center; }
.place-center{ place-items: center; }
.px-14{ padding-left: 14px; padding-right: 14px; }
.px-10{ padding-left: 10px; padding-right: 10px; }
.pb-34{ padding-bottom: 34px; }
.pb-8{ padding-bottom: 8px; }
.mt-0{ margin-top: 0; }
.mt-18{ margin-top: 18px; }
.mb-16{ margin-bottom: 16px; }
.mb-4{ margin-bottom: 4px; }
.mt-10{ margin-top: 10px; }
.mx-auto{ margin-left: auto; margin-right: auto; }
.w-min-560{ width: min(560px, 100%); }
.w-min-360{ width: min(360px, 100%); }
.pos-rel{ position: relative; }
.abs{ position: absolute; }
.top-12{ top: 12px; }
.right-10{ right: 10px; }
.left-10{ left: 10px; }
.gap-10{ gap: 10px; }
.z-10{ z-index: 10; }
.justify-end{ justify-content: flex-end; }
.justify-start{ justify-content: flex-start; }
.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }
.text-muted{ color: var(--muted); }
.text-black{ color: #000000; }
.bg-white{ background: #ffffff; }
.bg-fallback{ background: #4b0f0a; }
.rounded-full{ border-radius: 999px; }
.border-0{ border: 0; }
.border-3-black{ border: 3px solid #000000; }
.shadow-btn{ box-shadow: 0 10px 22px rgba(0,0,0,.15); }
.shadow-logo{ box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.shadow-text{ text-shadow: 0 1px 0 rgba(0,0,0,.08); }
.shadow-text-strong{ text-shadow: 0 2px 0 rgba(0,0,0,.08); }
.size-46{ width: 46px; height: 46px; }
.size-22{ width: 22px; height: 22px; }
.size-198{ width: 198px; height: 198px; }
.w-100{ width: 100%; }
.h-100{ height: 100%; }
.overflow-hidden{ overflow: hidden; }
.object-cover{ object-fit: cover; }
.object-contain{ object-fit: contain; }
.block{ display: block; }
.grid-center{ display: grid; place-items: center; }
.font-700{ font-weight: 700; }
.font-800{ font-weight: 800; }
.font-900{ font-weight: 900; }
.font-22{ font-size: 22px; }
.font-17{ font-size: 17px; }
.font-13{ font-size: 13px; }
.font-12{ font-size: 12px; }
.line-1-25{ line-height: 1.25; }
.line-1-1{ line-height: 1.1; }
.letter-0-5{ letter-spacing: .5px; }
.letter-0-4{ letter-spacing: .4px; }
.letter-0-2{ letter-spacing: .2px; }
.uppercase{ text-transform: uppercase; }
.pad-2y{ padding: 2px 0; }
.pad-6y{ padding-top: 6px; }
.pad-6-10-0{ padding: 6px 10px 0; }
.pad-10-12-8{ padding: 10px 12px 8px; }
.pad-left-14{ padding-left: 14px; }
.max-26ch{ max-width: 26ch; }
.bg-btn{ background: rgba(255,255,255,.72); }
.text-btn{ color: rgba(0,0,0,.75); }
.font-15-5{ font-size: 15.5px; }
.mirror-y{ transform: scaleY(-1); }
.scale-120{ transform: scale(1.2); transform-origin: center; }
.clear-both{ clear: both; }
.float-left{ float: left; }
.float-right{ float: right; }
.w-50{ width: 50%; }
.w-75{ width: 75%; }
.w-25{ width: 25%; }
.divider{ width: 100%; background: #000000; margin: 4px 0; clear: both; }
.h-1{ height: 1px; }
.h-2{ height: 2px; }
.h-6{ height: 6px; }
.opacity-1{ opacity: 1; }
.font-narrow{ font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; }
.no-shadow{ box-shadow: none; }
.flow-root{ display: flow-root; }