/* Canvas: Stoneground Meats */

@layer custom {
:root {
  --cnvs-themecolor: #6B1A1A;
  --cnvs-themecolor-rgb: 107,26,26;
  --cnvs-body-font: 'Mukta', sans-serif;
  --cnvs-primary-font: 'Alfa Slab One', serif;
  --cnvs-secondary-font: 'Alfa Slab One', serif;
  --cnvs-heading-font: 'Alfa Slab One', serif;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px; --space-8: 140px;
  --band: 96px; --band-compact: 56px; --gutter: 24px;
  --fs-display: clamp(2.6rem, 7vw, 5.2rem);
  --fs-h1: clamp(2.4rem, 5vw, 3.6rem);
  --fs-h2: 2.4rem; --fs-h3: 1.4rem; --fs-lead: 1.25rem;
  --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-label: 0.8125rem;
  --radius-s: 2px;
  --c-ground: #F5EDD6; --c-ground-2: #EDE2C4; --c-ink: #2A1511;
  --c-muted: #5C4A40; --c-accent: #2D5016; --c-oxblood: #6B1A1A; --c-line: #C9B98F;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
body { background: var(--c-ground); color: var(--c-ink); font-family: var(--cnvs-body-font); font-size: var(--fs-body); line-height: 1.65; }
h1, h2, h3 { font-family: var(--cnvs-primary-font); font-weight: 400; text-wrap: balance; color: var(--c-oxblood); }
p { text-wrap: pretty; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.sg-header, .sg-header #header-wrap { background: var(--c-ground); }
.sg-header .cnvs-menu-link { color: var(--c-ink); font-weight: 700; }
.sg-header .cnvs-menu-link:hover { color: var(--c-oxblood); }
@media (max-width: 1199.98px) { #header .header-misc { display: none; } }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sg-header .header-row { flex-wrap: nowrap; }
  .sg-header .cnvs-menu-link { padding-left: var(--space-2); padding-right: var(--space-2); font-size: var(--fs-small); }
}

.sg-btn { background: var(--c-accent); color: var(--c-ground); border-radius: var(--radius-s); font-family: var(--cnvs-body-font); font-weight: 700; font-size: var(--fs-body); text-transform: none; letter-spacing: 0; padding: var(--space-3) var(--space-5); transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.sg-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .sg-btn:hover { background: #1F3A0F; color: var(--c-ground); transform: translateY(-2px); } }
#header .sg-btn { padding: var(--space-2) var(--space-4); height: 40px; line-height: 24px; }
.sg-btn-cream, #preorder .sg-btn-cream { background: var(--c-ground); color: var(--c-oxblood); }
@media (hover: hover) and (pointer: fine) { .sg-btn-cream:hover { background: #fff; color: var(--c-oxblood); } }

.sg-hero { padding: var(--space-6) 0 var(--band); background: var(--c-ground); }
.sg-display { font-size: var(--fs-display); line-height: 1.05; color: var(--c-oxblood); margin: 0 0 var(--space-5); }
.sg-hero-stage { position: relative; }
.sg-hero-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-s); display: block; }
.sg-hero-card { position: absolute; top: calc(-1 * var(--space-5)); left: var(--space-4); max-width: 420px; background: var(--c-ground); border: 3px double var(--c-line); border-radius: var(--radius-s); padding: var(--space-4); }
.sg-farms { font-size: var(--fs-small); font-weight: 500; color: var(--c-muted); margin: 0 0 var(--space-3); }
.sg-phone { display: block; font-family: var(--cnvs-secondary-font); font-size: var(--fs-h3); color: var(--c-oxblood); margin-bottom: var(--space-3); }
@media (max-width: 767px) {
  .sg-hero { padding: var(--space-5) 0 var(--band-compact); }
  .sg-hero-card { position: static; max-width: none; margin-top: var(--space-3); }
}

.sg-band { padding: var(--band) 0; }
.sg-band-alt { background: var(--c-ground-2); }
@media (max-width: 767px) { .sg-band { padding: var(--band-compact) 0; } }
.sg-h2 { font-size: var(--fs-h2); line-height: 1.15; margin: 0 0 var(--space-3); }
.sg-h3 { font-size: var(--fs-h3); line-height: 1.25; margin: 0 0 var(--space-2); }
.sg-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-muted); max-width: 65ch; margin: 0 0 var(--space-5); }
.sg-oxblood { background: var(--c-oxblood); color: var(--c-ground); }
.sg-green { background: var(--c-accent); color: var(--c-ground); }
.dark.sg-oxblood h2, .dark.sg-oxblood h3, .dark.sg-green h2, .dark.sg-green h3 { color: var(--c-ground); }
.dark.sg-oxblood .sg-lead, .dark.sg-green .sg-lead { color: #F0E6CC; }
.dark.sg-oxblood a:not(.button), .dark.sg-green a:not(.button) { color: var(--c-ground); text-decoration: underline; text-underline-offset: 4px; }

.sg-card { background: var(--c-ground); border: 3px double var(--c-line); border-radius: var(--radius-s); overflow: hidden; height: 100%; color: var(--c-ink); }
.sg-card img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 400ms var(--ease-out); }
#farms .sg-card img { aspect-ratio: 3 / 2; }
.sg-card-body { padding: var(--space-4); }
.sg-card-body p { margin: 0 0 var(--space-2); }
.sg-tag { display: inline-block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-oxblood); border: 1px solid var(--c-oxblood); padding: var(--space-2) 0.75rem; margin-bottom: var(--space-2); line-height: 1.3; }
.sg-src { font-size: var(--fs-small); color: var(--c-muted); font-weight: 500; }
.sg-price { font-weight: 700; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.sg-link { color: var(--c-oxblood); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sg-link:hover { color: var(--c-accent); }
.sg-card-note { background: var(--c-ground-2); height: auto; display: flex; align-items: center; }
.sg-card-note .sg-card-body { background: transparent; }
.sg-hover { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sg-hover .sg-link { opacity: 0; transition: opacity 200ms var(--ease-out); }
  .sg-hover:hover, .sg-hover:focus-within { transform: translateY(-4px); }
  .sg-hover:hover img, .sg-hover:focus-within img { transform: scale(1.04); }
  .sg-hover:hover .sg-link, .sg-hover:focus-within .sg-link { opacity: 1; }
}
.sg-card-body { background: var(--c-ground); position: relative; }
.sg-hover { overflow: hidden; }
@media (min-width: 992px) { .sg-offset { margin-top: var(--space-5); } }

.sg-stamp { display: inline-block; font-family: var(--cnvs-secondary-font); font-size: var(--fs-h3); color: var(--c-ground); border: 2px solid var(--c-ground); padding: var(--space-2) var(--space-3); transform: rotate(-3deg); margin: 0; }
.sg-form { background: var(--c-ground); color: var(--c-ink); border-radius: var(--radius-s); padding: var(--space-4); }
.sg-form label { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-oxblood); margin-bottom: var(--space-2); }
.sg-form .form-control:where(:not(.form-select)), .sg-form .form-select { height: 48px; background: var(--c-ground); border: 1px solid var(--c-line); border-radius: var(--radius-s); color: var(--c-ink); }
.sg-form .cnvs-form-group { margin-bottom: var(--space-3); }
.sg-form .sg-btn-cream { background: var(--c-oxblood); color: var(--c-ground); }
.sg-form .form-control:where(:not(.form-select)):focus, .sg-form .form-select:focus { border-color: var(--c-accent); box-shadow: none; outline: 2px solid var(--c-accent); }

.sg-price-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.sg-price-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px dotted var(--c-line); font-size: var(--fs-body); }
.sg-price-list b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-frame { border: 3px double var(--c-line); padding: var(--space-2); border-radius: var(--radius-s); }
.sg-frame img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.sg-frame figcaption { font-size: var(--fs-small); color: var(--c-muted); padding-top: var(--space-2); }
.dark .sg-frame figcaption { color: #F0E6CC; }

.sg-sticky { position: static; }
@media (min-width: 992px) { .sg-sticky { position: sticky; top: 120px; } }
.sg-tip { height: auto; margin-bottom: var(--space-4); }

.sg-map { border: 3px double var(--c-line); border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 4 / 3; }
.sg-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.7) sepia(0.2); }

.sg-badge { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 99; width: 132px; height: 132px; border-radius: 50%; background: var(--c-accent); color: var(--c-ground); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-3); border: 2px solid var(--c-ground); line-height: 1.2; animation: sg-pulse 2.4s ease-in-out infinite; }
.sg-badge span { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.sg-badge b { font-size: var(--fs-small); margin-top: var(--space-1); }
.sg-badge:hover { color: var(--c-ground); }
@keyframes sg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .sg-badge { animation: none; } .sg-hover, .sg-card img, .sg-btn { transition: none; } }
@media (max-width: 575px) { .sg-badge { width: 104px; height: 104px; right: var(--space-3); bottom: var(--space-3); padding: var(--space-2); } }

.sg-footer { --cnvs-footer-bg: #2A1511; }
.sg-footer .footer-widgets-wrap { padding: var(--space-6) 0 var(--space-5); }
.sg-footline { color: #F0E6CC; margin-top: var(--space-3); }
.sg-ledger { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-4); margin: 0; }
.sg-ledger dt, .sg-ledger dd { padding: var(--space-2) 0; border-bottom: 1px dotted var(--c-line); margin: 0; }
.sg-ledger dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #E8D9AE; }
.sg-ledger dd { color: #F5EDD6; }
#footer .footer-widgets-wrap a { color: #F5EDD6; text-decoration: underline; text-underline-offset: 4px; }
#footer #copyrights { background: #1E0F0C; color: #E8D9AE; font-size: var(--fs-small); }
#footer #copyrights a { color: #F5EDD6; text-decoration: underline; }

:where(img[width][height]){height:auto}

:is(.content-wrap,.section):has([data-cx]){overflow-x:clip;overflow-y:visible}

.content-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

.section {
  margin-top: 0;
  margin-bottom: 0;
}

#copyrights a:not(.button) { text-decoration: underline !important; text-underline-offset: 0.2em; }
}