/**
 * Soogrim consumer art direction
 *
 * Mechanically ported from the ChatGPT prototype stylesheet so the cascade is
 * preserved exactly — including the specificity accidents that make several
 * labels render at body size rather than their declared micro-label size.
 * Those are what the design actually looks like; re-authoring "cleanly" would
 * change the rendering. Selectors are scoped to .art-soogrim and class-prefixed
 * with sg- to isolate the direction from the base theme stylesheet.
 *
 * Regenerate rather than hand-edit where possible.
 */

/* ---------------------------------------------------------------------------
   BASE-THEME NEUTRALISER — must stay above the ported rules.

   The prototype was authored standalone, against browser defaults. The base
   theme (assets/css/main.css) restyles bare ELEMENT selectors:

       p, ul            { margin: 0; padding: 0 }
       h1..h6           { margin: 0; font-family: <display>; font-weight: 700;
                          letter-spacing: -0.02em; line-height: 1 }

   Class-prefixing isolates this art direction from the base theme's CLASSES, but
   not from those element rules — and the prototype never declares these
   properties, so the base theme's values silently won. That zeroed every
   paragraph rhythm the design depends on, tracked every heading -0.02em, and
   pushed the base theme's display serif into headings the prototype renders in
   the body face.

   This restores the browser defaults the prototype assumes. The ported rules
   below then override wherever the prototype actually has an opinion.
   --------------------------------------------------------------------------- */
.art-soogrim p {
	margin: 1em 0;
	padding: 0;
}

.art-soogrim ul,
.art-soogrim ol {
	margin: 1em 0;
	padding-left: 40px;
}

.art-soogrim h1,
.art-soogrim h2,
.art-soogrim h3,
.art-soogrim h4,
.art-soogrim h5,
.art-soogrim h6 {
	font-family: inherit;
	font-weight: bold;
	letter-spacing: normal;
	/* The browser sets no line-height on headings, so they inherit the body's —
	   which is what the prototype's headings do. The base theme pins them to 1,
	   so inheritance has to be restored explicitly; `normal` would not do it. */
	line-height: inherit;
}

.art-soogrim h1 { margin: 0.67em 0; font-size: 2em; }
.art-soogrim h2 { margin: 0.83em 0; font-size: 1.5em; }
.art-soogrim h3 { margin: 1em 0;    font-size: 1.17em; }
.art-soogrim h4 { margin: 1.33em 0; font-size: 1em; }
.art-soogrim h5 { margin: 1.67em 0; font-size: 0.83em; }
.art-soogrim h6 { margin: 2.33em 0; font-size: 0.67em; }


.art-soogrim {
  --ink: #14140f;
  --forest: #0d3325;
  --leaf: #2f6b45;
  --pepper: #c5351d;
  --gold: #dca83a;
  --cream: #fff7e8;
  --white: #ffffff;
  --line: #e0d2ba;
  --muted: #6a7066;
  --soft: #f3ead7;
  --shadow: 0 20px 54px rgba(20, 20, 15, 0.14);
}

.art-soogrim * {
  box-sizing: border-box;
}

.art-soogrim {
  scroll-behavior: smooth;
}

.art-soogrim {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.art-soogrim a {
  color: inherit;
  text-decoration: none;
}

.art-soogrim button, .art-soogrim input, .art-soogrim select, .art-soogrim textarea {
  font: inherit;
}

.art-soogrim button {
  cursor: pointer;
}

.art-soogrim img {
  display: block;
  max-width: 100%;
}

.art-soogrim :focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.art-soogrim .sg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.art-soogrim .sg-skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  transform: translateY(-160%);
  border-radius: 6px;
  background: var(--gold);
  color: var(--ink);
  padding: 10px 14px;
  font-weight: 900;
}

.art-soogrim .sg-skip-link:focus {
  transform: translateY(0);
}

.art-soogrim .sg-announce {
  display: flex;
  justify-content: center;
  gap: 8px;
  background: var(--pepper);
  color: var(--white);
  padding: 10px 16px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.art-soogrim .sg-announce a {
  border-bottom: 1px solid currentColor;
}

.art-soogrim .sg-site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 76px;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 247, 232, 0.94);
  padding: 14px 28px;
  backdrop-filter: blur(16px);
}

.art-soogrim .sg-brand {
  display: inline-grid;
  align-items: center;
  gap: 3px;
  min-width: max-content;
  line-height: 1;
}

.art-soogrim .sg-brand-logo {
  display: block;
  width: 156px;
  height: auto;
}

.art-soogrim .sg-serif {
  font-family: Georgia, "Times New Roman", serif;
}

.art-soogrim .sg-brand small {
  display: block;
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.art-soogrim .sg-main-nav, .art-soogrim .sg-footer-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  color: #454a40;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim .sg-main-nav a:hover, .art-soogrim .sg-main-nav a.sg-is-active, .art-soogrim .sg-footer-nav a:hover {
  color: var(--pepper);
}

.art-soogrim .sg-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.art-soogrim .sg-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim .sg-cart-link span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--white);
  font-size: 0.72rem;
}

.art-soogrim .sg-button, .art-soogrim .sg-header-cta, .art-soogrim .sg-signup button, .art-soogrim .sg-product button, .art-soogrim .sg-cart-item button, .art-soogrim .sg-contact-form button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  padding: 0 18px;
  background: var(--pepper);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.art-soogrim .sg-button:hover, .art-soogrim .sg-header-cta:hover, .art-soogrim .sg-signup button:hover, .art-soogrim .sg-product button:hover, .art-soogrim .sg-cart-item button:hover, .art-soogrim .sg-contact-form button:hover {
  transform: translateY(-1px);
  background: #de4227;
}

.art-soogrim .sg-button.sg-alt {
  border: 1px solid rgba(13, 51, 37, 0.2);
  background: transparent;
  color: var(--forest);
}

.art-soogrim .sg-button.sg-alt:hover {
  background: var(--forest);
  color: var(--white);
}

.art-soogrim .sg-hero {
  position: relative;
  min-height: 690px;
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.art-soogrim .sg-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.art-soogrim .sg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 247, 232, 0.96), rgba(255, 247, 232, 0.72) 34%, rgba(255, 247, 232, 0.1) 72%);
}

.art-soogrim .sg-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin-left: max(28px, calc((100% - 1280px) / 2));
  padding: 70px 28px;
  animation: rise 650ms ease both;
}

.art-soogrim .sg-hero-labels {
  position: relative;
  width: min(100%, 430px);
  height: 42px;
  display: block;
  overflow: hidden;
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 247, 232, 0.88);
  box-shadow: 0 8px 22px rgba(20, 20, 15, 0.12);
  color: var(--forest);
  backdrop-filter: blur(10px);
}

.art-soogrim .sg-hero-labels::before {
  content: "Featured";
  position: absolute;
  inset: 0 auto 0 14px;
  display: flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.art-soogrim .sg-hero-labels span {
  position: absolute;
  inset: 0 14px 0 106px;
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  color: var(--forest);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  animation: heroLabel var(--label-cycle, 16s) ease-in-out infinite;
  animation-delay: calc(var(--i) * 4s);
}

.art-soogrim .sg-eyebrow, .art-soogrim .sg-kicker {
  color: var(--pepper);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.art-soogrim h1, .art-soogrim h2, .art-soogrim h3 {
  text-wrap: balance;
}

.art-soogrim h1, .art-soogrim .sg-section-title, .art-soogrim .sg-product h3, .art-soogrim .sg-story-card h3, .art-soogrim .sg-cart-title {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

.art-soogrim h1 {
  max-width: 640px;
  margin: 16px 0 0;
  font-size: clamp(3.2rem, 7.4vw, 5.25rem);
  line-height: 0.94;
}

.art-soogrim .sg-hero-copy p {
  max-width: 530px;
  margin: 24px 0 0;
  color: #454a40;
  font-size: 1.12rem;
}

.art-soogrim .sg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.art-soogrim .sg-signup {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  max-width: 470px;
  margin-top: 28px;
}

.art-soogrim .sg-signup input, .art-soogrim .sg-contact-form input, .art-soogrim .sg-contact-form select, .art-soogrim .sg-contact-form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  padding: 0 13px;
}

.art-soogrim .sg-signup-status, .art-soogrim .sg-form-status {
  min-height: 20px;
  margin-top: 10px;
  color: var(--forest);
  font-size: 0.9rem;
  font-weight: 800;
}

.art-soogrim .sg-section, .art-soogrim .sg-page-hero, .art-soogrim .sg-cart-section {
  padding: 86px 28px;
}

.art-soogrim .sg-section-inner, .art-soogrim .sg-page-inner, .art-soogrim .sg-footer-inner, .art-soogrim .sg-cart-layout {
  max-width: 1280px;
  margin: 0 auto;
}

.art-soogrim .sg-section-heading {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  align-items: end;
  gap: 40px;
  margin-bottom: 36px;
}

.art-soogrim .sg-section-title, .art-soogrim .sg-cart-title {
  margin: 10px 0 0;
  font-size: 3.55rem;
  line-height: 0.95;
}

.art-soogrim .sg-section-heading p, .art-soogrim .sg-page-lede, .art-soogrim .sg-story-card p, .art-soogrim .sg-product p, .art-soogrim .sg-cart-layout p {
  color: var(--muted);
  font-size: 1.02rem;
}

.art-soogrim .sg-category-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 240px;
  gap: 12px;
}

.art-soogrim .sg-category {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(13, 51, 37, 0.15);
  border-radius: 8px;
  padding: 26px;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.art-soogrim .sg-category::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.art-soogrim .sg-category:hover, .art-soogrim .sg-category:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(32, 24, 15, 0.16);
}

.art-soogrim .sg-category:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.art-soogrim .sg-category-copy {
  position: relative;
  z-index: 3;
  width: min(54%, 360px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.art-soogrim .sg-category-eyebrow, .art-soogrim .sg-category-cta {
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.2;
  text-transform: uppercase;
}

.art-soogrim .sg-category-title {
  max-width: 100%;
  margin-top: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.15rem;
  line-height: 0.94;
}

.art-soogrim .sg-category-description {
  max-width: 320px;
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.art-soogrim .sg-category-cta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
}

.art-soogrim .sg-category-cta span {
  font-size: 1rem;
  transition: translate 180ms ease;
}

.art-soogrim .sg-category:hover .sg-category-cta span {
  translate: 5px 0;
}

.art-soogrim .sg-category-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.art-soogrim .sg-category-product {
  position: absolute;
  display: block;
  width: 320px;
  height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 16px 16px rgba(20, 14, 8, 0.2));
  transition: translate 260ms ease;
}

.art-soogrim .sg-category:hover .sg-category-product {
  translate: 0 -6px;
}

.art-soogrim .sg-category-sauce {
  --category-rgb: 20, 59, 43;
  grid-column: span 7;
  grid-row: span 2;
  background: #143b2b;
  color: var(--white);
}

.art-soogrim .sg-category-sauce::before {
  background: linear-gradient(90deg, rgba(8, 37, 26, 0.98), rgba(8, 37, 26, 0.9) 43%, rgba(8, 37, 26, 0.28) 61%, rgba(8, 37, 26, 0.02) 78%);
}

.art-soogrim .sg-category-sauce .sg-category-title {
  font-size: 3.45rem;
}

.art-soogrim .sg-category-sauce .sg-category-description, .art-soogrim .sg-category-sauce .sg-category-eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.art-soogrim .sg-category-sauce .sg-category-product-1 {
  right: 120px;
  bottom: 2px;
  width: 390px;
  height: 390px;
  z-index: 1;
}

.art-soogrim .sg-category-sauce .sg-category-product-2 {
  right: -75px;
  bottom: 2px;
  width: 335px;
  height: 335px;
  z-index: 2;
}

.art-soogrim .sg-category-sauce .sg-category-product-3 {
  right: 48px;
  bottom: 2px;
  width: 310px;
  height: 310px;
  z-index: 3;
}

.art-soogrim .sg-category-achar, .art-soogrim .sg-category-pantry {
  grid-column: span 5;
}

.art-soogrim .sg-category-achar {
  --category-rgb: 162, 58, 37;
  background: #a23a25;
  color: var(--white);
}

.art-soogrim .sg-category-achar::before {
  background: linear-gradient(90deg, rgba(105, 28, 17, 0.95), rgba(105, 28, 17, 0.68) 54%, rgba(105, 28, 17, 0.04));
}

.art-soogrim .sg-category-achar .sg-category-eyebrow, .art-soogrim .sg-category-achar .sg-category-description {
  color: rgba(255, 255, 255, 0.8);
}

.art-soogrim .sg-category-achar .sg-category-product-1 {
  right: 84px;
  bottom: -22px;
  width: 260px;
  height: 260px;
}

.art-soogrim .sg-category-achar .sg-category-product-2 {
  right: -10px;
  bottom: -22px;
  width: 252px;
  height: 252px;
}

.art-soogrim .sg-category-achar .sg-category-product-3 {
  right: -96px;
  bottom: -32px;
  width: 268px;
  height: 268px;
}

.art-soogrim .sg-category-pantry {
  --category-rgb: 241, 214, 148;
  background: #f1d694;
  color: var(--forest);
}

.art-soogrim .sg-category-pantry::before, .art-soogrim .sg-category-produce::before {
  background: linear-gradient(90deg, rgba(255, 247, 232, 0.96), rgba(255, 247, 232, 0.7) 55%, rgba(255, 247, 232, 0.04));
}

.art-soogrim .sg-category-pantry .sg-category-product-1 {
  right: -40px;
  bottom: -44px;
  width: 318px;
  height: 318px;
  rotate: 2deg;
}

.art-soogrim .sg-category-pantry .sg-category-product-2 {
  right: 118px;
  bottom: -32px;
  width: 248px;
  height: 248px;
  rotate: -2deg;
}

.art-soogrim .sg-category-oils, .art-soogrim .sg-category-produce, .art-soogrim .sg-category-plants {
  grid-column: span 4;
  min-height: 240px;
}

.art-soogrim .sg-category-oils {
  --category-rgb: 53, 92, 67;
  background: #355c43;
  color: var(--white);
}

.art-soogrim .sg-category-oils::before, .art-soogrim .sg-category-plants::before {
  background: linear-gradient(90deg, rgba(16, 52, 37, 0.96), rgba(16, 52, 37, 0.7) 56%, rgba(16, 52, 37, 0.04));
}

.art-soogrim .sg-category-oils .sg-category-eyebrow, .art-soogrim .sg-category-oils .sg-category-description, .art-soogrim .sg-category-plants .sg-category-eyebrow, .art-soogrim .sg-category-plants .sg-category-description {
  color: rgba(255, 255, 255, 0.78);
}

.art-soogrim .sg-category-oils .sg-category-product-1 {
  right: -88px;
  bottom: -52px;
  width: 356px;
  height: 356px;
}

.art-soogrim .sg-category-oils .sg-category-product-2 {
  right: 118px;
  bottom: -58px;
  width: 265px;
  height: 265px;
}

.art-soogrim .sg-category-produce {
  --category-rgb: 217, 216, 174;
  background: #d9d8ae;
  color: var(--forest);
}

.art-soogrim .sg-category-produce .sg-category-product-1 {
  right: -78px;
  bottom: -102px;
  width: 430px;
  height: 430px;
}

.art-soogrim .sg-category-plants {
  --category-rgb: 33, 59, 47;
  background: #213b2f;
  color: var(--white);
}

.art-soogrim .sg-category-plants .sg-category-copy {
  width: 58%;
}

.art-soogrim .sg-category-plants .sg-category-title {
  font-size: 1.9rem;
}

.art-soogrim .sg-category-plants .sg-category-product-1 {
  right: 82px;
  bottom: -42px;
  width: 275px;
  height: 275px;
}

.art-soogrim .sg-category-plants .sg-category-product-2 {
  right: -94px;
  bottom: -84px;
  width: 335px;
  height: 335px;
}

.art-soogrim .sg-category-plants .sg-category-product-3 {
  right: -2px;
  bottom: -58px;
  width: 228px;
  height: 228px;
}

.art-soogrim .sg-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.art-soogrim .sg-aisle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}

.art-soogrim .sg-aisle-bar button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--forest);
  padding: 0 14px;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim .sg-aisle-bar button span {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--forest);
  font-size: 0.66rem;
  letter-spacing: 0;
}

.art-soogrim .sg-aisle-bar button.sg-is-active span, .art-soogrim .sg-aisle-bar button[aria-pressed="true"] span {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.art-soogrim .sg-aisle-bar button.sg-is-active, .art-soogrim .sg-aisle-bar button[aria-pressed="true"] {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--white);
}

.art-soogrim .sg-product {
  display: grid;
  grid-template-rows: 252px minmax(0, 1fr);
  align-content: start;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  overflow: hidden;
}

.art-soogrim .sg-product-visual {
  height: 252px;
  min-height: 252px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fffdfa, #f1e7d4);
  overflow: hidden;
  padding: 18px;
}

.art-soogrim .sg-product-visual img {
  width: min(88%, 242px);
  height: min(92%, 232px);
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(20, 20, 15, 0.1));
}

.art-soogrim .sg-product-placeholder-image {
  max-width: 190px;
  max-height: 190px;
}

.art-soogrim .sg-product-packshot-image {
  max-width: 250px;
  max-height: 236px;
}

.art-soogrim .sg-product-photo-card .sg-product-visual {
  padding: 0;
  background: #dce4d6;
}

.art-soogrim .sg-product-photo-card .sg-product-visual .sg-product-catalog-image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  filter: none;
  transition: scale 300ms ease;
}

.art-soogrim .sg-product-photo-card:hover .sg-product-catalog-image {
  scale: 1.025;
}

.art-soogrim .sg-plants-page .sg-product-featured {
  grid-column: 1 / -1;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(340px, auto);
}

.art-soogrim .sg-plants-page .sg-product-featured .sg-product-visual {
  width: 100%;
  height: auto;
  min-height: 340px;
}

.art-soogrim .sg-plants-page .sg-product-featured .sg-product-visual img {
  width: min(90%, 440px);
  height: min(90%, 300px);
  max-width: 440px;
  max-height: 300px;
}

.art-soogrim .sg-plants-page .sg-product-featured .sg-product-body {
  align-content: center;
}

.art-soogrim .sg-product-photo-missing {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: var(--soft);
  color: var(--forest);
  text-align: center;
  padding: 16px;
}

.art-soogrim .sg-product-photo-missing strong, .art-soogrim .sg-product-photo-missing span {
  display: block;
}

.art-soogrim .sg-product-photo-missing strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
}

.art-soogrim .sg-product-photo-missing span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim .sg-product.sg-sauce .sg-product-visual {
  background-position: 70% 50%;
}

.art-soogrim .sg-product.sg-ghee .sg-product-visual {
  background-position: 64% 58%;
}

.art-soogrim .sg-product.sg-oil .sg-product-visual {
  background-position: 82% 55%;
}

.art-soogrim .sg-product.sg-produce .sg-product-visual {
  background-position: 88% 74%;
}

.art-soogrim .sg-product.sg-plants .sg-product-visual {
  background-position: 100% 43%;
}

.art-soogrim .sg-product.sg-achar .sg-product-visual {
  background-position: 74% 54%;
}

.art-soogrim .sg-product.sg-pantry .sg-product-visual {
  background-position: 58% 50%;
}

.art-soogrim .sg-product.sg-spice .sg-product-visual {
  background-position: 66% 62%;
}

.art-soogrim .sg-product-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto auto;
  gap: 10px;
  min-height: 0;
  background: var(--white);
  padding: 20px;
}

.art-soogrim .sg-product-aisle {
  margin: 0;
  color: var(--pepper);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.art-soogrim .sg-product h3 {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.art-soogrim .sg-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.art-soogrim .sg-badge-row span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.art-soogrim .sg-variant-control {
  display: grid;
  gap: 7px;
  margin-top: 2px;
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim .sg-variant-control select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  padding: 0 11px;
  text-transform: none;
  letter-spacing: 0;
}

.art-soogrim .sg-product button {
  width: 100%;
  margin-top: auto;
}

.art-soogrim .sg-story-band {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 38px;
  align-items: center;
  background: var(--forest);
  color: var(--white);
  padding: 86px max(28px, calc((100% - 1280px) / 2));
}

.art-soogrim .sg-story-band .sg-section-title, .art-soogrim .sg-story-band p {
  color: var(--white);
}

.art-soogrim .sg-story-band .sg-button.sg-alt, .art-soogrim .sg-cart-summary .sg-button.sg-alt {
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--white);
}

.art-soogrim .sg-story-band .sg-button.sg-alt:hover, .art-soogrim .sg-cart-summary .sg-button.sg-alt:hover {
  background: var(--white);
  color: var(--forest);
}

.art-soogrim .sg-story-image {
  min-height: 460px;
  border-radius: 9px;
  background:
    url("../images/soogrim/farm-fresh-produce.webp") center 58% / min(88%, 640px) auto no-repeat,
    linear-gradient(145deg, #e7d7ad, #cf9f46);
  background-position: center;
  box-shadow: var(--shadow);
}

.art-soogrim .sg-page-hero {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

.art-soogrim .sg-page-inner {
  display: grid;
  grid-template-columns: 0.74fr 1.26fr;
  gap: 42px;
  align-items: end;
}

.art-soogrim .sg-page-inner h1 {
  font-size: 4.6rem;
}

.art-soogrim .sg-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.art-soogrim .sg-page-links a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  background: var(--white);
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.art-soogrim .sg-catalog-signal {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 30px 0 0;
  color: var(--forest);
}

.art-soogrim .sg-catalog-signal strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.85rem;
  line-height: 1;
}

.art-soogrim .sg-catalog-signal span {
  max-width: 220px;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.art-soogrim .sg-catalog-ledger {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.art-soogrim .sg-catalog-ledger .sg-section-inner {
  display: flex;
  min-height: 62px;
  align-items: stretch;
  overflow-x: auto;
}

.art-soogrim .sg-catalog-ledger span {
  display: grid;
  min-width: max-content;
  place-items: center;
  border-right: 1px solid var(--line);
  padding: 0 22px;
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim .sg-catalog-ledger span:first-child {
  border-left: 1px solid var(--line);
}

.art-soogrim .sg-catalog-section {
  padding-top: 52px;
}

.art-soogrim .sg-image-hero-page .sg-page-hero {
  position: relative;
  min-height: 460px;
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 0;
  color: var(--white);
  background-color: var(--forest);
  background-position: center;
  background-size: cover;
}

.art-soogrim .sg-shop-page .sg-page-hero {
  min-height: 600px;
  background-image:
    linear-gradient(90deg, rgba(7, 35, 25, 0.97), rgba(7, 35, 25, 0.88) 38%, rgba(7, 35, 25, 0.32) 68%, rgba(7, 35, 25, 0.08)),
    url("../images/soogrim/consumer-hero-expanded-v3.webp");
  background-position: center;
}

.art-soogrim .sg-shop-page .sg-page-inner {
  grid-template-columns: minmax(0, 540px);
  align-content: end;
  gap: 18px;
}

.art-soogrim .sg-shop-page .sg-page-inner h1 {
  font-size: 4.2rem;
}

.art-soogrim .sg-shop-page .sg-page-lede {
  max-width: 540px;
  margin: 0;
}

.art-soogrim .sg-shop-page .sg-page-links {
  margin-top: 20px;
}

.art-soogrim .sg-shop-page .sg-page-links a {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.94);
}

.art-soogrim .sg-shop-page .sg-catalog-signal {
  margin-top: 22px;
}

.art-soogrim .sg-produce-page .sg-page-hero {
  background-image:
    linear-gradient(90deg, rgba(13, 51, 37, 0.94), rgba(13, 51, 37, 0.64) 55%, rgba(13, 51, 37, 0.2)),
    url("../images/soogrim/produce-assorted-hot-peppers.webp");
}

.art-soogrim .sg-plants-page .sg-page-hero {
  background-image:
    linear-gradient(90deg, rgba(13, 51, 37, 0.95), rgba(13, 51, 37, 0.66) 58%, rgba(13, 51, 37, 0.24)),
    url("../images/soogrim/plant-hot-pepper-start.webp");
  background-position: center 38%;
}

.art-soogrim .sg-sauce-page .sg-page-hero {
  background-image:
    linear-gradient(90deg, rgba(13, 51, 37, 0.96), rgba(13, 51, 37, 0.66) 55%, rgba(13, 51, 37, 0.2)),
    url("../images/soogrim/sauce-hero-v1.webp");
}

.art-soogrim .sg-achar-page .sg-page-hero {
  background-image:
    linear-gradient(90deg, rgba(13, 51, 37, 0.96), rgba(13, 51, 37, 0.66) 55%, rgba(13, 51, 37, 0.2)),
    url("../images/soogrim/achar-hero-v1.webp");
}

.art-soogrim .sg-pantry-page .sg-page-hero {
  background-image:
    linear-gradient(90deg, rgba(13, 51, 37, 0.96), rgba(13, 51, 37, 0.66) 55%, rgba(13, 51, 37, 0.2)),
    url("../images/soogrim/pantry-hero-v1.webp");
}

.art-soogrim .sg-recipes-page .sg-page-hero {
  background-image:
    linear-gradient(90deg, rgba(13, 51, 37, 0.96), rgba(13, 51, 37, 0.66) 55%, rgba(13, 51, 37, 0.2)),
    url("../images/soogrim/recipes-hero-v1.webp");
}

.art-soogrim .sg-oils-page .sg-page-hero {
  background-image:
    linear-gradient(90deg, rgba(13, 51, 37, 0.96), rgba(13, 51, 37, 0.66) 55%, rgba(13, 51, 37, 0.2)),
    url("../images/soogrim/oils-ghee-hero-v1.webp");
}

.art-soogrim .sg-sauce-page .sg-page-inner, .art-soogrim .sg-achar-page .sg-page-inner, .art-soogrim .sg-pantry-page .sg-page-inner, .art-soogrim .sg-recipes-page .sg-page-inner, .art-soogrim .sg-oils-page .sg-page-inner {
  grid-template-columns: minmax(0, 600px);
}

.art-soogrim .sg-sauce-page .sg-page-inner h1, .art-soogrim .sg-achar-page .sg-page-inner h1, .art-soogrim .sg-pantry-page .sg-page-inner h1, .art-soogrim .sg-recipes-page .sg-page-inner h1, .art-soogrim .sg-oils-page .sg-page-inner h1 {
  font-size: 4.2rem;
}

.art-soogrim .sg-sauce-page .sg-page-lede, .art-soogrim .sg-achar-page .sg-page-lede, .art-soogrim .sg-pantry-page .sg-page-lede, .art-soogrim .sg-recipes-page .sg-page-lede, .art-soogrim .sg-oils-page .sg-page-lede {
  max-width: 560px;
  margin: 24px 0 0;
}

.art-soogrim .sg-oils-page .sg-page-inner {
  grid-template-columns: minmax(0, 480px);
}

.art-soogrim .sg-oils-page .sg-page-inner h1 {
  font-size: 3.7rem;
}

.art-soogrim .sg-oils-page .sg-page-lede {
  max-width: 460px;
}

.art-soogrim .sg-image-hero-page .sg-page-inner {
  width: 100%;
}

.art-soogrim .sg-image-hero-page .sg-page-lede, .art-soogrim .sg-image-hero-page .sg-catalog-signal {
  color: rgba(255, 255, 255, 0.86);
}

.art-soogrim .sg-about-hero {
  position: relative;
  min-height: 650px;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--white);
  background: var(--forest);
}

.art-soogrim .sg-about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 35, 25, 0.96), rgba(7, 35, 25, 0.72) 50%, rgba(7, 35, 25, 0.14));
}

.art-soogrim .sg-about-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}

.art-soogrim .sg-about-hero-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 90px 28px;
}

.art-soogrim .sg-about-hero-copy .sg-eyebrow {
  color: #f3c967;
}

.art-soogrim .sg-about-hero-copy h1 {
  max-width: 780px;
}

.art-soogrim .sg-about-hero-copy > p:last-child {
  max-width: 610px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.12rem;
}

.art-soogrim .sg-belief-band {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.art-soogrim .sg-belief-inner {
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 auto;
}

.art-soogrim .sg-belief-inner article {
  min-height: 360px;
  padding: 72px 54px 72px 28px;
}

.art-soogrim .sg-belief-inner article + article {
  border-left: 1px solid var(--line);
  padding-right: 28px;
  padding-left: 54px;
}

.art-soogrim .sg-belief-inner h2, .art-soogrim .sg-about-origin-copy h2 {
  max-width: 560px;
  margin: 14px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.1rem;
  letter-spacing: 0;
  line-height: 0.98;
}

.art-soogrim .sg-belief-inner article > p:last-child, .art-soogrim .sg-about-origin-copy > p {
  max-width: 560px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.art-soogrim .sg-about-origin {
  max-width: 1280px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 70px;
  align-items: center;
  margin: 0 auto;
  padding: 96px 28px;
}

.art-soogrim .sg-about-origin-image {
  min-height: 620px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--forest);
}

.art-soogrim .sg-about-origin-image img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
}

.art-soogrim .sg-origin-facts {
  margin: 38px 0 0;
  border-top: 1px solid var(--line);
}

.art-soogrim .sg-origin-facts div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
}

.art-soogrim .sg-origin-facts dt {
  color: var(--pepper);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.art-soogrim .sg-origin-facts dd {
  margin: 0;
  color: var(--forest);
  font-weight: 800;
}

.art-soogrim .sg-range-section {
  border-top: 1px solid var(--line);
  background: #f0d9ad;
  padding: 88px 28px 96px;
}

.art-soogrim .sg-range-list {
  border-bottom: 1px solid rgba(13, 51, 37, 0.3);
}

.art-soogrim .sg-range-list a {
  display: grid;
  grid-template-columns: 62px minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  gap: 18px;
  align-items: center;
  min-height: 82px;
  border-top: 1px solid rgba(13, 51, 37, 0.3);
  color: var(--forest);
  transition: background 180ms ease, padding 180ms ease;
}

.art-soogrim .sg-range-list a:hover {
  background: rgba(255, 255, 255, 0.32);
  padding-inline: 12px;
}

.art-soogrim .sg-range-list span {
  color: var(--pepper);
  font-size: 0.72rem;
  font-weight: 950;
}

.art-soogrim .sg-range-list strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  letter-spacing: 0;
}

.art-soogrim .sg-range-list em {
  color: rgba(13, 51, 37, 0.72);
  font-style: normal;
}

.art-soogrim .sg-story-grid, .art-soogrim .sg-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.art-soogrim .sg-story-card, .art-soogrim .sg-contact-card {
  min-height: 240px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  padding: 24px;
}

.art-soogrim .sg-story-card h3, .art-soogrim .sg-contact-card h3 {
  margin: 10px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
}

.art-soogrim .sg-contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 820px;
}

.art-soogrim .sg-contact-form label {
  display: grid;
  gap: 7px;
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim .sg-contact-form textarea {
  min-height: 130px;
  padding: 13px;
  resize: vertical;
}

.art-soogrim .sg-wide {
  grid-column: 1 / -1;
}

.art-soogrim .sg-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
}

.art-soogrim .sg-cart-items {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.art-soogrim .sg-cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  padding: 20px;
}

.art-soogrim .sg-cart-item h3 {
  margin: 0;
  font-size: 1.45rem;
}

.art-soogrim .sg-cart-summary {
  display: grid;
  gap: 12px;
  align-content: start;
  border-radius: 9px;
  background: var(--forest);
  color: var(--white);
  padding: 22px;
}

.art-soogrim .sg-cart-summary p {
  color: rgba(255, 255, 255, 0.72);
}

.art-soogrim .sg-site-footer {
  background: var(--forest);
  color: rgba(255, 255, 255, 0.72);
  padding: 30px 28px;
}

.art-soogrim .sg-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  min-width: 0;
}

.art-soogrim .sg-site-footer .sg-brand small {
  color: rgba(255, 255, 255, 0.6);
}

.art-soogrim .sg-footer-nav {
  color: rgba(255, 255, 255, 0.72);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroLabel {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  2%,
  20% {
    opacity: 1;
    transform: translateY(0);
  }

  25%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@media (max-width: 1080px) {
  .art-soogrim .sg-site-header {
    grid-template-columns: auto 1fr;
  }

  .art-soogrim .sg-hero-bg {
    object-position: 25% center;
  }

  .art-soogrim .sg-hero::after {
    background: linear-gradient(90deg, rgba(255, 247, 232, 0.98), rgba(255, 247, 232, 0.86) 64%, rgba(255, 247, 232, 0.3));
  }

  .art-soogrim .sg-main-nav {
    grid-column: 1 / -1;
    justify-content: start;
    flex-wrap: wrap;
  }

  .art-soogrim .sg-header-actions {
    justify-content: end;
  }

  .art-soogrim .sg-section-heading, .art-soogrim .sg-page-inner, .art-soogrim .sg-story-band, .art-soogrim .sg-cart-layout {
    grid-template-columns: 1fr;
  }

  .art-soogrim .sg-product-grid, .art-soogrim .sg-story-grid, .art-soogrim .sg-contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .art-soogrim .sg-category-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(260px, auto);
  }

  .art-soogrim .sg-category {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 260px;
  }

  .art-soogrim .sg-category-sauce {
    grid-column: 1 / -1;
    min-height: 330px;
  }

  .art-soogrim .sg-category-sauce .sg-category-product-1 {
    right: 153px;
    bottom: 0;
    width: 340px;
    height: 340px;
  }

  .art-soogrim .sg-category-sauce .sg-category-product-2 {
    right: -47px;
    bottom: 0;
    width: 280px;
    height: 280px;
  }

  .art-soogrim .sg-category-sauce .sg-category-product-3 {
    right: 78px;
    bottom: 0;
    width: 260px;
    height: 260px;
  }

  .art-soogrim .sg-belief-inner, .art-soogrim .sg-about-origin {
    grid-template-columns: 1fr;
  }

  .art-soogrim .sg-about-origin {
    gap: 42px;
  }

  .art-soogrim .sg-about-origin-image, .art-soogrim .sg-about-origin-image img {
    min-height: 480px;
  }
}

@media (min-width: 701px) and (max-width: 1080px) {
  .art-soogrim .sg-shop-page .sg-page-hero {
    background-position: left center;
  }

  .art-soogrim .sg-shop-page .sg-page-inner {
    grid-template-columns: minmax(0, 420px);
  }

  .art-soogrim .sg-shop-page .sg-page-inner h1 {
    font-size: 3.4rem;
  }

  .art-soogrim .sg-sauce-page .sg-page-inner, .art-soogrim .sg-achar-page .sg-page-inner, .art-soogrim .sg-pantry-page .sg-page-inner, .art-soogrim .sg-recipes-page .sg-page-inner, .art-soogrim .sg-oils-page .sg-page-inner {
    grid-template-columns: minmax(0, 340px);
  }

  .art-soogrim .sg-sauce-page .sg-page-inner h1, .art-soogrim .sg-achar-page .sg-page-inner h1, .art-soogrim .sg-pantry-page .sg-page-inner h1, .art-soogrim .sg-recipes-page .sg-page-inner h1, .art-soogrim .sg-oils-page .sg-page-inner h1 {
    font-size: 3.25rem;
  }

  .art-soogrim .sg-sauce-page .sg-page-lede, .art-soogrim .sg-achar-page .sg-page-lede, .art-soogrim .sg-pantry-page .sg-page-lede, .art-soogrim .sg-recipes-page .sg-page-lede, .art-soogrim .sg-oils-page .sg-page-lede {
    max-width: 340px;
  }

  .art-soogrim .sg-oils-page .sg-page-hero {
    background-position: 20% center;
  }

  .art-soogrim .sg-oils-page .sg-page-inner {
    grid-template-columns: minmax(0, 300px);
  }

  .art-soogrim .sg-oils-page .sg-page-inner h1 {
    font-size: 3rem;
  }

  .art-soogrim .sg-oils-page .sg-page-lede {
    max-width: 300px;
  }
}

@media (max-width: 700px) {
  .art-soogrim .sg-announce {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .art-soogrim .sg-site-header {
    padding: 12px 16px;
  }

  .art-soogrim .sg-brand small {
    display: none;
  }

  .art-soogrim .sg-cart-link {
    font-size: 0.7rem;
  }

  .art-soogrim .sg-brand-logo {
    width: 142px;
  }

  .art-soogrim .sg-main-nav {
    gap: 16px;
    font-size: 0.72rem;
  }

  .art-soogrim .sg-header-cta {
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.68rem;
  }

  .art-soogrim .sg-hero {
    min-height: 610px;
  }

  .art-soogrim .sg-hero::after {
    background: linear-gradient(90deg, rgba(255, 247, 232, 0.98), rgba(255, 247, 232, 0.84) 72%, rgba(255, 247, 232, 0.5));
  }

  .art-soogrim .sg-hero-bg {
    object-position: 22% center;
  }

  .art-soogrim .sg-hero-copy {
    margin-left: 0;
    padding: 48px 18px;
  }

  .art-soogrim .sg-hero-labels {
    width: 100%;
    max-width: 360px;
    height: 40px;
  }

  .art-soogrim .sg-hero-labels::before {
    left: 12px;
    font-size: 0.62rem;
  }

  .art-soogrim .sg-hero-labels span {
    inset-inline: 96px 12px;
    font-size: 0.68rem;
  }

  .art-soogrim h1, .art-soogrim .sg-page-inner h1 {
    font-size: 3.02rem;
  }

  .art-soogrim .sg-section, .art-soogrim .sg-page-hero, .art-soogrim .sg-cart-section, .art-soogrim .sg-story-band {
    padding: 62px 16px;
  }

  .art-soogrim .sg-section-title, .art-soogrim .sg-cart-title {
    font-size: 2.45rem;
  }

  .art-soogrim .sg-signup {
    grid-template-columns: 1fr;
  }

  .art-soogrim .sg-hero-actions, .art-soogrim .sg-footer-inner {
    display: grid;
  }

  .art-soogrim .sg-brand {
    min-width: 0;
  }

  .art-soogrim .sg-footer-nav {
    justify-content: start;
    flex-wrap: wrap;
  }

  .art-soogrim .sg-hero-actions .sg-button, .art-soogrim .sg-contact-form button {
    width: 100%;
  }

  .art-soogrim .sg-product-grid, .art-soogrim .sg-story-grid, .art-soogrim .sg-contact-grid, .art-soogrim .sg-contact-form {
    grid-template-columns: 1fr;
  }

  .art-soogrim .sg-plants-page .sg-product-featured {
    grid-template-columns: 1fr;
    grid-template-rows: 252px minmax(0, 1fr);
  }

  .art-soogrim .sg-plants-page .sg-product-featured .sg-product-visual {
    height: 252px;
    min-height: 252px;
  }

  .art-soogrim .sg-image-hero-page .sg-page-hero {
    min-height: 540px;
    background-position: 62% center;
  }

  .art-soogrim .sg-shop-page .sg-page-hero {
    min-height: 540px;
    background-image:
      linear-gradient(90deg, rgba(7, 35, 25, 0.98), rgba(7, 35, 25, 0.94) 58%, rgba(7, 35, 25, 0.78)),
      url("../images/soogrim/consumer-hero-expanded-v3.webp");
    background-position: 42% center;
    padding-block: 48px;
  }

  .art-soogrim .sg-shop-page .sg-page-inner {
    gap: 14px;
  }

  .art-soogrim .sg-shop-page .sg-page-inner h1 {
    font-size: 2.85rem;
  }

  .art-soogrim .sg-shop-page .sg-page-links {
    gap: 7px;
    margin-top: 16px;
  }

  .art-soogrim .sg-shop-page .sg-page-links a {
    padding: 8px 10px;
  }

  .art-soogrim .sg-shop-page .sg-catalog-signal {
    margin-top: 18px;
  }

  .art-soogrim .sg-plants-page .sg-page-hero {
    background-position: 58% center;
  }

  .art-soogrim .sg-sauce-page .sg-page-hero, .art-soogrim .sg-pantry-page .sg-page-hero, .art-soogrim .sg-recipes-page .sg-page-hero {
    background-position: 24% center;
  }

  .art-soogrim .sg-oils-page .sg-page-hero {
    background-position: 16% center;
  }

  .art-soogrim .sg-sauce-page .sg-page-hero {
    background-position: 18% center;
  }

  .art-soogrim .sg-achar-page .sg-page-hero {
    background-position: 12% center;
  }

  .art-soogrim .sg-sauce-page .sg-page-inner h1, .art-soogrim .sg-achar-page .sg-page-inner h1, .art-soogrim .sg-pantry-page .sg-page-inner h1, .art-soogrim .sg-recipes-page .sg-page-inner h1 {
    font-size: 3.02rem;
  }

  .art-soogrim .sg-oils-page .sg-page-inner h1 {
    max-width: 300px;
    font-size: 2.72rem;
  }

  .art-soogrim .sg-oils-page .sg-page-lede {
    max-width: 290px;
  }

  .art-soogrim .sg-catalog-signal {
    margin-top: 22px;
  }

  .art-soogrim .sg-catalog-ledger .sg-section-inner {
    padding-left: 16px;
  }

  .art-soogrim .sg-catalog-ledger span:first-child {
    border-left: 0;
  }

  .art-soogrim .sg-catalog-section {
    padding-top: 40px;
  }

  .art-soogrim .sg-about-hero {
    min-height: 600px;
  }

  .art-soogrim .sg-about-hero::after {
    background: linear-gradient(0deg, rgba(7, 35, 25, 0.97), rgba(7, 35, 25, 0.76) 62%, rgba(7, 35, 25, 0.18));
  }

  .art-soogrim .sg-about-hero > img {
    object-position: 58% center;
  }

  .art-soogrim .sg-about-hero-copy {
    padding: 64px 16px;
  }

  .art-soogrim .sg-belief-inner article, .art-soogrim .sg-belief-inner article + article {
    min-height: 0;
    border-left: 0;
    padding: 58px 16px;
  }

  .art-soogrim .sg-belief-inner article + article {
    border-top: 1px solid var(--line);
  }

  .art-soogrim .sg-belief-inner h2, .art-soogrim .sg-about-origin-copy h2 {
    font-size: 2.45rem;
  }

  .art-soogrim .sg-about-origin {
    gap: 34px;
    padding: 64px 16px;
  }

  .art-soogrim .sg-about-origin-image, .art-soogrim .sg-about-origin-image img {
    min-height: 390px;
  }

  .art-soogrim .sg-origin-facts div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .art-soogrim .sg-range-section {
    padding: 64px 16px 72px;
  }

  .art-soogrim .sg-range-list a {
    grid-template-columns: 42px 1fr;
    gap: 8px 12px;
    padding: 15px 0;
  }

  .art-soogrim .sg-range-list em {
    grid-column: 2;
  }

  .art-soogrim .sg-range-list a:hover {
    padding-inline: 8px;
  }

  .art-soogrim .sg-category-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 330px);
    grid-auto-rows: 360px;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    margin-right: -16px;
    padding: 3px 16px 14px 0;
  }

  .art-soogrim .sg-category-row > .sg-category {
    grid-column: auto;
    grid-row: auto;
    min-height: 360px;
    padding: 22px;
    scroll-snap-align: start;
  }

  .art-soogrim .sg-category-copy, .art-soogrim .sg-category-plants .sg-category-copy {
    width: 100%;
  }

  .art-soogrim .sg-category::before, .art-soogrim .sg-category-sauce::before, .art-soogrim .sg-category-achar::before, .art-soogrim .sg-category-pantry::before, .art-soogrim .sg-category-oils::before, .art-soogrim .sg-category-produce::before, .art-soogrim .sg-category-plants::before {
    background: linear-gradient(0deg, rgba(var(--category-rgb), 1) 0%, rgba(var(--category-rgb), 0.98) 48%, rgba(var(--category-rgb), 0.82) 64%, rgba(var(--category-rgb), 0.04) 86%);
  }

  .art-soogrim .sg-category-title, .art-soogrim .sg-category-plants .sg-category-title {
    font-size: 2.15rem;
  }

  .art-soogrim .sg-category-sauce .sg-category-title {
    font-size: 2.7rem;
  }

  .art-soogrim .sg-category-description {
    max-width: 230px;
    font-size: 0.84rem;
  }

  .art-soogrim .sg-category-sauce .sg-category-product-1 {
    top: -5px;
    right: 183px;
    bottom: auto;
    width: 165px;
    height: 165px;
  }

  .art-soogrim .sg-category-sauce .sg-category-product-2 {
    top: -5px;
    right: -28px;
    bottom: auto;
    width: 165px;
    height: 165px;
  }

  .art-soogrim .sg-category-sauce .sg-category-product-3 {
    top: -5px;
    right: 78px;
    bottom: auto;
    width: 165px;
    height: 165px;
  }

  .art-soogrim .sg-category-achar .sg-category-product-1 {
    right: 4px;
    bottom: -6px;
    width: 285px;
    height: 285px;
  }

  .art-soogrim .sg-category-achar .sg-category-product-2 {
    right: -92px;
    bottom: -10px;
    width: 278px;
    height: 278px;
  }

  .art-soogrim .sg-category-achar .sg-category-product-3 {
    right: -168px;
    bottom: -18px;
    width: 290px;
    height: 290px;
  }

  .art-soogrim .sg-category-pantry .sg-category-product-1 {
    right: -82px;
    bottom: -30px;
    width: 360px;
    height: 360px;
  }

  .art-soogrim .sg-category-pantry .sg-category-product-2 {
    right: 42px;
    bottom: -18px;
    width: 282px;
    height: 282px;
  }

  .art-soogrim .sg-category-oils .sg-category-product-1 {
    right: -106px;
    bottom: -42px;
    width: 390px;
    height: 390px;
  }

  .art-soogrim .sg-category-oils .sg-category-product-2 {
    right: 54px;
    bottom: -36px;
    width: 300px;
    height: 300px;
  }

  .art-soogrim .sg-category-produce .sg-category-product-1 {
    right: -94px;
    bottom: -76px;
    width: 470px;
    height: 470px;
  }

  .art-soogrim .sg-category-plants .sg-category-product-1 {
    right: 0;
    bottom: -22px;
    width: 300px;
    height: 300px;
  }

  .art-soogrim .sg-category-plants .sg-category-product-2 {
    right: -130px;
    bottom: -66px;
    width: 360px;
    height: 360px;
  }

  .art-soogrim .sg-category-plants .sg-category-product-3 {
    right: -54px;
    bottom: -40px;
    width: 245px;
    height: 245px;
  }

  .art-soogrim .sg-story-image {
    min-height: 320px;
  }

  .art-soogrim .sg-cart-item {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   MOBILE NAVIGATION — an addition, not part of the ported design.

   The prototype ships no mobile navigation: its nine uppercase links simply wrap,
   producing a 201px-tall sticky header at 375px with the announce bar above it —
   about a third of the viewport consumed before any content, and pinned on scroll.
   That is a defect, not a design decision.

   The base theme already implements a drawer for the shared
   spotros-nav / spotros-nav-list / spotros-nav-toggle contract (see main.css), and
   assets/js/nav-toggle.js drives it. Rather than build a second one, this layer
   does two things:

     1. Suppresses that drawer between 701px and 1024px, because the base theme
        switches at 1024 while the prototype's own narrowest breakpoint is 700.
        Tablets therefore keep the prototype's real nav, exactly as designed.
     2. Skins the drawer below 700px in the Soogrim palette.

   Everything above this comment is the prototype's own cascade, transformed but
   otherwise unaltered.
   =========================================================================== */

/* The <nav> is a passthrough so the link list is the header's grid child, which
   is the geometry the prototype's own .sg-main-nav rules were written against. */
.art-soogrim .sg-nav-shell {
	display: contents;
}

.art-soogrim .sg-main-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.art-soogrim .sg-main-nav > li {
	display: inline-flex;
}

/* Drawer-only affordances stay out of the desktop bar. The `> li` rule above
   out-specifies a bare class, so these must match it element-for-element. */
.art-soogrim .sg-main-nav > li.sg-nav-drawer-call {
	display: none;
}

/* 701-1024px: hold the prototype's tablet layout against the base drawer. */
@media (min-width: 701px) and (max-width: 1024px) {
	.art-soogrim .spotros-site-header[data-nav-js="ready"] .spotros-nav {
		display: contents;
	}

	.art-soogrim .spotros-site-header[data-nav-js="ready"] .spotros-nav-toggle {
		display: none;
	}
}

@media (max-width: 700px) {
	.art-soogrim .sg-site-header {
		min-height: 64px;
	}

	/* The prototype's header carries backdrop-filter, and a filtered element
	   becomes the containing block for fixed-position descendants — which traps
	   the drawer overlay inside the 64px header instead of the viewport. The base
	   layer disables this on its own header-inner element; this art direction puts
	   the filter on the header itself, so it has to be disabled here too. The
	   header sits behind the opaque overlay while open, so nothing looks different. */
	.art-soogrim .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Skin only — the overlay mechanics come from the base layer. The base centres
	   its list vertically, which pushes the first link above the viewport once a
	   nine-item nav no longer fits; start at the top and let it scroll instead. */
	.art-soogrim .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-nav {
		background: var(--cream);
		align-items: flex-start;
		justify-content: flex-start;
	}

	.art-soogrim .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sg-main-nav {
		gap: 0;
		font-size: 1rem;
		justify-content: flex-start;
		text-align: left;
		padding: 5rem 1.5rem calc(3rem + env(safe-area-inset-bottom, 0px));
	}

	.art-soogrim .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sg-main-nav > li {
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--line);
	}

	.art-soogrim .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sg-main-nav > li.sg-nav-drawer-call {
		display: block;
		border-bottom: 0;
	}

	.art-soogrim .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sg-main-nav a {
		display: block;
		padding: 16px 2px;
	}

	.art-soogrim .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sg-nav-drawer-call a {
		color: var(--pepper);
	}

	.art-soogrim .sg-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: 10px;
		background: var(--white);
		cursor: pointer;
	}

	.art-soogrim .spotros-nav-toggle-bars {
		display: block;
		width: 18px;
	}

	.art-soogrim .spotros-nav-toggle-bars span {
		display: block;
		height: 2px;
		border-radius: 2px;
		background: var(--forest);
	}

	.art-soogrim .spotros-nav-toggle-bars span + span {
		margin-top: 4px;
	}

	.art-soogrim .sg-header-cta {
		display: none;
	}
}

/* ===========================================================================
   PRODUCE / PLANTS HERO — a deliberate correction to the prototype.

   `.sg-page-inner` defaults to a two-column grid (0.74fr 1.26fr), which puts the
   lede BESIDE the headline. The prototype then collapses it to a single column
   for .sauce-page, .achar-page, .pantry-page, .recipes-page and .oils-page — but
   omits .produce-page and .plants-page, so those two alone render the lede off to
   the right while the other five stack it underneath.

   Nothing in the prototype suggests that is intentional: the two pages share the
   image-hero treatment with the other five, and the omission reads as an oversight
   in the override list. The Owner asked for them to match the rest, so they are
   added to both overrides here. This is an intentional DEVIATION from the
   prototype and must be re-applied if the prototype is regenerated — unless the
   regenerated stylesheet has fixed the list itself, in which case delete this block.
   =========================================================================== */
.art-soogrim .sg-produce-page .sg-page-inner,
.art-soogrim .sg-plants-page .sg-page-inner {
	grid-template-columns: minmax(0, 600px);
}

.art-soogrim .sg-produce-page .sg-page-inner h1,
.art-soogrim .sg-plants-page .sg-page-inner h1 {
	font-size: 4.2rem;
}

/* ===========================================================================
   FOOTER LEGAL ROW — an addition, not part of the ported design.

   The prototype carries no copyright, privacy or terms copy anywhere. Every site
   on this network must link the network legal pages, so the row is added — and,
   until now, shipped unstyled: raw stacked text with the three links running
   together into one unreadable line.

   It is deliberately quieter than the footer nav above it: this is fine print,
   not navigation, so it sits below a hairline, drops the uppercase treatment and
   uses a lower-contrast ink than the links it sits under.
   =========================================================================== */
.art-soogrim .sg-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 0 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.56);
	font-size: 0.78rem;
	letter-spacing: 0.01em;
}

.art-soogrim .sg-footer-legal p {
	margin: 0;
}

.art-soogrim .sg-footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}

/* A hairline between items reads better than relying on whitespace alone, which
   is what made "Privacy Terms Powered by SpotrOS" run together as one phrase. */
.art-soogrim .sg-footer-legal-links a + a {
	padding-left: 18px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.art-soogrim .sg-footer-legal-links a {
	color: inherit;
	text-decoration: none;
}

.art-soogrim .sg-footer-legal-links a:hover {
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 700px) {
	.art-soogrim .sg-footer-legal {
		justify-content: flex-start;
		padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
	}
}