:root {
  --site-berry: #c3315f;
  --site-citrus: #f8b84e;
  --site-mint: #3f8f6b;
  --site-ink: #263238;
  --site-muted: #657178;
  --site-cream: #fff8f0;
  --site-blush: #ffe4df;
  --site-sky: #dff5ff;
  --site-line: #eaded2;
  --site-white: #ffffff;
}

body.site-root {
  color: var(--site-ink);
  background: var(--site-cream);
  font-size: 16px;
  line-height: 1.65;
}

.boxed {
  background: var(--site-white);
}

#main-content {
  clear: both;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -50px;
  z-index: 9999;
  padding: 10px 14px;
  color: #fff;
  background: var(--site-berry);
}

.skip-link:focus {
  top: 12px;
}

a, button, input, textarea {
  outline-color: var(--site-berry);
  outline-offset: 3px;
}

.site-top-bar {
  background: var(--site-ink);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
}

.site-top-bar a,
.site-top-bar i {
  color: #fff;
}

.site-top-bar .container {
  padding-top: 7px;
  padding-bottom: 7px;
}

.site-top-bar .topbar-list {
  margin: 0;
}

.site-top-bar .btn-social-icon {
  width: 28px;
  height: 28px;
  line-height: 28px;
  padding: 0;
  border: 0;
  background: var(--site-berry);
}

.site-social-btn {
  font-size: 12px;
}

.navbar-main {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--site-line);
}

.navbar-wrapper {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.nav-is-stuck .navbar-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

#fixed-navbar {
  transition: box-shadow 0.2s ease, min-height 0.2s ease;
}

.nav-is-stuck #fixed-navbar {
  box-shadow: 0 8px 22px rgba(38, 50, 56, 0.12);
}

.site-brand {
  transition: padding 0.2s ease;
}

.site-brand img {
  max-height: 92px;
  width: auto;
  transition: max-height 0.2s ease;
}

.nav-is-stuck .site-brand {
  padding-top: 10px;
  padding-bottom: 10px;
}

.nav-is-stuck .site-brand img {
  max-height: 62px;
}

.navbar-main .navbar-nav .nav-link {
  color: var(--site-ink);
  font-weight: 700;
  letter-spacing: 0;
  background: transparent;
}

.navbar-main .navbar-nav .nav-link:hover,
.navbar-main .navbar-nav > .active > .nav-link,
.navbar-main .navbar-nav > .show > .nav-link {
  color: #000;
  background: transparent;
  font-weight: 900;
}

.navbar.navbar-main .navbar-nav > .active > .nav-link,
.navbar.navbar-main .navbar-nav > .active > .nav-link:hover,
.navbar.navbar-main .navbar-nav > .active > .nav-link:focus,
.navbar.navbar-main .navbar-nav > .nav-item:hover > .nav-link,
.navbar.navbar-main .navbar-nav .nav-link:hover,
.navbar.navbar-main .navbar-nav > .show > .nav-link,
.navbar.navbar-main .navbar-nav > .show > .nav-link:hover,
.navbar.navbar-main .navbar-nav > .show > .nav-link:focus {
  color: #000 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 0 !important;
  font-weight: 900;
  text-decoration: none;
}

.navbar.navbar-main .dropdown-menu,
.navbar.navbar-main .dropdown-menu > li,
.navbar.navbar-main .dropdown-menu > li.active,
.navbar.navbar-main .dropdown-menu > li:hover {
  background: #fff !important;
  background-color: #fff !important;
}

.navbar.navbar-main .dropdown-item,
.navbar.navbar-main .dropdown-item.active,
.navbar.navbar-main .dropdown-item.active:hover,
.navbar.navbar-main .dropdown-item.active:focus,
.navbar.navbar-main .dropdown-item:hover,
.navbar.navbar-main .dropdown-item:focus {
  color: var(--site-muted) !important;
  background: #fff !important;
  background-color: #fff !important;
  border-bottom: 0 !important;
  font-weight: 700;
  text-decoration: none;
}

.navbar.navbar-main .dropdown-item:hover,
.navbar.navbar-main .dropdown-item:focus {
  color: #000 !important;
}

.btn.btn-rw {
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.btn-primary,
.btn.btn-primary,
.btn-rw.btn-primary {
  color: #fff;
  border-color: var(--site-berry);
  background: var(--site-berry);
}

.btn-primary:hover,
.btn-rw.btn-primary:hover {
  border-color: #9e2149;
  background: #9e2149;
}

.btn-clear {
  color: var(--site-berry);
  border: 2px solid var(--site-berry);
  background: #fff;
}

section {
  padding: 62px 0;
}

.section-band {
  background: #fff8f0;
  border-top: 1px solid var(--site-line);
  border-bottom: 1px solid var(--site-line);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--site-berry);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1, h2, h3 {
  color: var(--site-ink);
  font-weight: 900;
  letter-spacing: 0;
}

h1 {
  font-size: 48px;
  line-height: 1.08;
}

h2 {
  font-size: 30px;
  line-height: 1.2;
}

h3 {
  font-size: 21px;
}

.lead {
  color: var(--site-muted);
  font-size: 20px;
}

.site-text-justify {
  text-align: justify;
}

.home-slider {
  clear: both;
  display: block;
  width: 100%;
  padding: 0;
  background: linear-gradient(135deg, #fff7ee 0%, #ffe4df 45%, #dff5ff 100%);
}

.site-static-hero {
  position: relative;
  width: 100%;
  min-height: 520px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(195, 49, 95, 0.78), rgba(38, 50, 56, 0.72)),
    linear-gradient(90deg, rgba(255, 228, 223, 0.92) 0%, rgba(255, 248, 240, 0.86) 54%, rgba(223, 245, 255, 0.92) 100%);
}

.site-hero-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

.site-hero-pattern {
  position: absolute;
  right: 8%;
  bottom: -78px;
  opacity: 0.38;
}

.site-hero-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  padding-top: 48px;
  padding-bottom: 48px;
  text-align: center;
}

.site-hero-kicker,
.site-hero-copy {
  color: #fff;
  font-family: Arial, sans-serif;
  white-space: normal;
}

.site-hero-kicker {
  color: #fff;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.site-hero-title {
  max-width: 900px;
  margin: 0 0 24px;
  padding-bottom: 16px;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
  font-family: Arial, sans-serif;
  font-size: 54px;
  font-weight: 900;
  line-height: 1.08;
}

.site-hero-copy {
  max-width: 760px;
  margin-bottom: 30px;
  font-size: 22px;
  line-height: 1.45;
}

.site-hero-buttons .btn {
  margin-right: 12px;
}

.site-hero-buttons .btn-clear {
  color: #fff;
  border-color: #fff;
  background: transparent;
}

.hero-jar {
  display: block;
  width: 320px;
  height: 390px;
  margin: 0 auto;
  border: 10px solid rgba(38, 50, 56, 0.16);
  border-radius: 38px 38px 80px 80px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.65) 30%, rgba(195,49,95,0.88) 31%, rgba(248,184,78,0.8) 100%);
  box-shadow: 0 28px 55px rgba(195, 49, 95, 0.22);
}

.hero-jar:before {
  content: "";
  display: block;
  width: 190px;
  height: 52px;
  margin: -42px auto 0;
  border: 10px solid rgba(38, 50, 56, 0.18);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: rgba(255,255,255,0.65);
}

.hero-jar:after {
  content: "";
  display: block;
  width: 180px;
  height: 74px;
  margin: 92px auto 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.82);
}

.page-hero {
  padding: 88px 0 64px;
  background:
    linear-gradient(120deg, rgba(255,248,240,0.95), rgba(223,245,255,0.82)),
    radial-gradient(circle at 85% 30%, rgba(248,184,78,0.22), transparent 36%);
  border-bottom: 1px solid var(--site-line);
}

.page-hero .lead {
  max-width: 760px;
}

.split-layout,
.two-column,
.product-detail,
.recipe-detail,
.checkout-layout,
.cart-layout,
.newsletter-inner,
.cta-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

.split-layout:before,
.split-layout:after,
.two-column:before,
.two-column:after,
.product-detail:before,
.product-detail:after,
.recipe-detail:before,
.recipe-detail:after,
.checkout-layout:before,
.checkout-layout:after,
.cart-layout:before,
.cart-layout:after,
.newsletter-inner:before,
.newsletter-inner:after,
.cta-band-inner:before,
.cta-band-inner:after,
.site-hero-center:before,
.site-hero-center:after,
.card-grid:before,
.card-grid:after,
.proof-grid:before,
.proof-grid:after,
.steps-grid:before,
.steps-grid:after,
.flavor-list:before,
.flavor-list:after,
.process-timeline:before,
.process-timeline:after,
.filter-toolbar:before,
.filter-toolbar:after,
.tag-cloud:before,
.tag-cloud:after,
.form-grid:before,
.form-grid:after,
.inline-form:before,
.inline-form:after,
.card-actions:before,
.card-actions:after,
.cta-actions:before,
.cta-actions:after,
.share-controls:before,
.share-controls:after,
.footer-grid:before,
.footer-grid:after {
  display: none;
  content: none;
}

.heading h2,
.heading h3 {
  position: relative;
  margin-top: 0;
  padding-bottom: 12px;
}

.heading h2:after,
.heading h3:after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 12px;
  background: var(--site-berry);
}

.text-center .heading h2:after,
.text-center.heading h2:after,
.text-center .heading h3:after,
.text-center.heading h3:after {
  margin-right: auto;
  margin-left: auto;
}

.card-grid {
  display: grid;
  gap: 24px;
}

.card-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card,
.quote-card,
.ingredient-tile,
.process-timeline article,
.faq-item,
.order-summary {
  border: 1px solid var(--site-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(38, 50, 56, 0.07);
}

.card-body,
.text-card,
.quote-card,
.ingredient-tile,
.event-card,
.order-summary {
  padding: 22px;
}

.site-photo {
  display: flex;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: rgba(38, 50, 56, 0.68);
  background: linear-gradient(135deg, #fff8f0, #ffe4df 55%, #dff5ff);
  border-radius: 8px 8px 0 0;
  font-weight: 800;
}

.jar-outline {
  width: 86px;
  height: 112px;
  border: 5px solid rgba(38, 50, 56, 0.2);
  border-radius: 14px 14px 28px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 35%, rgba(195,49,95,0.55) 36%, rgba(63,143,107,0.35));
}

.badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 9px;
  color: #fff;
  background: var(--site-mint);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}

.mini-specs,
.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
}

.mini-specs dt,
.detail-list dt {
  color: var(--site-muted);
}

.mini-specs dd,
.detail-list dd {
  margin: 0;
  font-weight: 800;
}

.card-actions,
.cta-actions,
.share-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.event-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.event-card-header .badge {
  margin-bottom: 0;
}

.event-icon-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.event-icon-action {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
}

.event-icon-action.is-active {
  color: var(--site-berry);
}

.event-icon-action.is-active:hover,
.event-icon-action.is-active:focus {
  color: #9e2149;
  background: #fff0f5;
  text-decoration: none;
}

.event-icon-action.is-disabled {
  color: #c9c9c9;
  cursor: not-allowed;
}

.proof-grid,
.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.site-feature-row {
  margin-top: 24px;
}

.legacy-feature {
  min-height: 238px;
  padding: 22px 14px;
  border: 1px solid var(--site-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(38, 50, 56, 0.06);
}

.legacy-feature p {
  margin-bottom: 0;
}

.content-box-short {
  padding: 18px 18px 16px;
  border-left: 5px solid var(--site-citrus);
  border-radius: 8px;
  background: #fff8f0;
  box-shadow: 0 8px 18px rgba(38, 50, 56, 0.06);
}

.content-box-short + .content-box-short {
  margin-top: 16px;
}

.proof-grid div,
.steps-grid article {
  padding: 20px;
  border-left: 5px solid var(--site-citrus);
  background: #fff;
  border-radius: 8px;
}

.proof-grid strong,
.proof-grid span {
  display: block;
}

.steps-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.steps-grid span,
.process-timeline span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--site-berry);
  border-radius: 50%;
  font-weight: 900;
}

.newsletter-section,
.cta-band {
  background: var(--site-ink);
  color: #fff;
}

.newsletter-section h2,
.newsletter-section .eyebrow,
.cta-band h2,
.cta-band .eyebrow,
.newsletter-section p,
.cta-band p {
  color: #fff;
}

.inline-form {
  display: flex;
  gap: 10px;
}

.inline-form input,
.site-form input,
.site-form textarea,
.search-row input,
.qty-input,
.order-summary input,
.quantity-controls input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--site-ink);
  border: 1px solid #cdbfb3;
  border-radius: 6px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

.form-message {
  min-height: 24px;
  margin-top: 10px;
  font-weight: 800;
}

.filter-toolbar,
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.filter-button,
.tag-cloud span {
  padding: 9px 13px;
  border: 1px solid var(--site-line);
  border-radius: 999px;
  background: #fff;
  color: var(--site-ink);
  font-weight: 800;
}

.filter-button.active {
  color: #fff;
  border-color: var(--site-berry);
  background: var(--site-berry);
}

.search-row {
  max-width: 620px;
  margin-bottom: 16px;
}

.flavor-list {
  display: grid;
  gap: 30px;
}

.flavor-feature {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.taste-meter {
  display: grid;
  grid-template-columns: 95px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 800;
}

.meter-track {
  height: 10px;
  background: #f0e4db;
  border-radius: 999px;
  overflow: hidden;
}

.meter-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--site-citrus), var(--site-berry));
}

.thumbnail-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.thumbnail-row span {
  min-height: 70px;
  border-radius: 6px;
  background: #fff0e9;
  border: 1px solid var(--site-line);
}

.product-purchase-panel,
.recipe-facts {
  padding: 28px;
  border-radius: 8px;
  background: #fff8f0;
  border: 1px solid var(--site-line);
}

.price {
  color: var(--site-berry);
  font-size: 28px;
  font-weight: 900;
}

.needs-confirmation {
  padding: 12px 14px;
  border-left: 4px solid var(--site-citrus);
  background: #fff;
  font-weight: 700;
}

.process-timeline {
  display: grid;
  gap: 18px;
}

.process-timeline article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 22px;
}

.faq-question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border: 0;
  background: #fff;
  color: var(--site-ink);
  font-size: 18px;
  font-weight: 900;
  text-align: left;
}

.faq-answer {
  padding: 0 20px 18px;
}

.cart-row {
  display: grid;
  grid-template-columns: 150px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--site-line);
}

.cart-row .site-photo {
  min-height: 120px;
}

.quantity-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.quantity-controls button,
.remove-button {
  min-height: 40px;
  border: 1px solid var(--site-line);
  border-radius: 6px;
  background: #fff;
}

.quantity-controls input {
  max-width: 70px;
}

.article-detail,
.legal-copy,
.story-copy {
  max-width: 840px;
}

.story-copy blockquote {
  margin: 28px 0;
  padding: 20px;
  border-left: 6px solid var(--site-berry);
  background: #fff8f0;
  font-size: 24px;
  font-weight: 900;
}

.footer-main {
  padding: 42px 0 24px;
  background: #fff;
  border-top: 1px solid var(--site-line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 28px;
}

.footer-logo {
  max-width: 170px;
  height: auto;
}

.footer-main nav a {
  display: block;
  margin-bottom: 8px;
  color: var(--site-ink);
}

.footer-main nav h2 {
  font-size: 18px;
}

.footer-social {
  margin-top: 24px;
  text-align: center;
}

.footer-social img {
  width: 58px;
  height: auto;
  margin: 0 8px;
}

.copyright {
  margin-top: 18px;
  text-align: center;
  color: var(--site-muted);
}

@media (max-width: 991px) {
  h1 { font-size: 38px; }
  .split-layout,
  .two-column,
  .product-detail,
  .recipe-detail,
  .checkout-layout,
  .cart-layout,
  .newsletter-inner,
  .cta-band-inner,
  .flavor-feature {
    grid-template-columns: 1fr;
  }
  .card-grid.three,
  .card-grid.four,
  .steps-grid,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-hero-title { font-size: 44px; }
  .site-hero-copy { font-size: 18px; }
  .site-hero-pattern { display: none; }
}

@media (max-width: 640px) {
  section { padding: 42px 0; }
  h1 { font-size: 32px; }
  h2 { font-size: 25px; }
  .card-grid.two,
  .card-grid.three,
  .card-grid.four,
  .proof-grid,
  .steps-grid,
  .footer-grid,
  .form-grid,
  .cart-row {
    grid-template-columns: 1fr;
  }
  .inline-form,
  .card-actions,
  .cta-actions {
    flex-direction: column;
  }
  .site-brand img { max-height: 72px; }
  .nav-is-stuck .site-brand img { max-height: 58px; }
  .page-hero { padding: 54px 0 42px; }
  .site-hero-title { font-size: 34px; }
  .site-hero-buttons .btn { display: block; margin: 0 0 10px; }
}

@media print {
  header,
  footer,
  .page-hero,
  .share-controls,
  .cta-band,
  .newsletter-section {
    display: none !important;
  }
  .printable-recipe {
    background: #fff;
    border: 0;
  }
}