/* ==========================================================================
   Marlow Butchery — design tokens
   Butcher-shop palette: deep maroon (the meat), sage/bottle green (the
   apron and the tile), mustard yellow (the signwriting). Cream paper
   ground, ink text. Yellow is reserved for emphasis and counts so it
   keeps its voice; maroon carries brand, green carries action.
   ========================================================================== */

:root {
  --color-bg: #FFFDF8;
  --color-bg-alt: #F7F0E2;
  --color-bg-alt-2: #EFE3CB;
  --color-ink: #1F1A17;
  --color-ink-soft: #5E564C;
  --color-line: #E0D5BF;

  --color-maroon: #7A1F2B;
  --color-maroon-dark: #561018;
  --color-maroon-tint: #F3E6E5;

  --color-green: #35502F;
  --color-green-dark: #24381F;

  --color-yellow: #E7B23B;
  --color-yellow-soft: #F6DFA6;

  /* Order-status red — deliberately not the brand maroon, so "failed" or
     "rejected" reads as an alert rather than as brand colour. */
  --color-danger: #B3261E;
  --color-danger-dark: #7C1913;

  /* Semantic aliases used by the rest of the site */
  --color-accent: var(--color-maroon);
  --color-accent-dark: var(--color-maroon-dark);
  --color-sale: var(--color-green);
  --color-card-bg: #FFFFFF;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --container-max: 1180px;
  --transition-fast: 160ms ease;

  --header-h: 76px;
}

/* ==========================================================================
   Base
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container-max);
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--color-maroon);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  background: var(--color-ink);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 2000;
}

.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.5rem;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.hero__cta {
  background: var(--color-maroon);
  color: #fff;
  border: 1px solid var(--color-maroon);
  display: inline-block;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--color-maroon-dark);
  border-color: var(--color-maroon-dark);
  color: #fff;
}

.add-to-cart-btn {
  width: 100%;
  background: var(--color-green);
  color: #fff;
  border: 1px solid var(--color-green);
}

.add-to-cart-btn:hover,
.add-to-cart-btn:focus-visible {
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
  color: #fff;
}

.add-to-cart-btn.is-added {
  background: var(--color-maroon);
  border-color: var(--color-maroon);
}

/* --------------------------------------------------------------------------
   Unified pill CTA — every button on the site should carry this class.
   Base colour is maroon; add a modifier for the other brand colours.
   -------------------------------------------------------------------------- */

.btn-default {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1em;
  text-transform: capitalize;
  background: var(--color-maroon);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 17px 56px 17px 25px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

.btn-default__icon {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  transition: right 0.4s ease-in-out, background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

.btn-default__icon svg {
  transition: transform 0.4s ease-in-out;
}

.btn-default:hover,
.btn-default:focus-visible {
  background: var(--color-maroon-dark);
  color: #fff;
}

.btn-default:hover .btn-default__icon,
.btn-default:focus-visible .btn-default__icon {
  right: 4px;
  background: var(--color-yellow);
  color: var(--color-maroon-dark);
}

.btn-default:hover .btn-default__icon svg,
.btn-default:focus-visible .btn-default__icon svg {
  transform: translateX(2px);
}

/* Colour variants */

.btn-default--yellow {
  background: var(--color-yellow);
  color: var(--color-ink);
}

.btn-default--yellow .btn-default__icon {
  background: rgba(31, 26, 23, 0.12);
  color: var(--color-ink);
}

.btn-default--yellow:hover,
.btn-default--yellow:focus-visible {
  background: var(--color-yellow-soft);
  color: var(--color-ink);
}

.btn-default--yellow:hover .btn-default__icon,
.btn-default--yellow:focus-visible .btn-default__icon {
  background: var(--color-maroon);
  color: #fff;
}

.btn-default--green {
  background: var(--color-green);
  color: #fff;
}

.btn-default--green:hover,
.btn-default--green:focus-visible {
  background: var(--color-green-dark);
  color: #fff;
}

.btn-default--outline {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}

.btn-default--outline .btn-default__icon {
  background: rgba(255, 255, 255, 0.14);
}

.btn-default--outline:hover,
.btn-default--outline:focus-visible {
  background: var(--color-yellow);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-yellow);
}

@media (max-width: 399.98px) {
  .btn-default {
    padding: 14px 50px 14px 20px;
    font-size: 0.92rem;
  }
}

/* ==========================================================================
   Top bar — deep maroon strip, items split by hairline rules
   ========================================================================== */

.topbar {
  background: var(--color-maroon-dark);
  color: rgba(255, 253, 248, 0.86);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.topbar__inner {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 1rem;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  position: relative;
}

.topbar__item:first-child {
  padding-left: 0;
}

/* Vertical hairline between each piece of shop info */
.topbar__item + .topbar__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(231, 178, 59, 0.45);
}

.topbar__item svg {
  color: var(--color-yellow);
  flex-shrink: 0;
}

.topbar__item--link {
  color: #fff;
  transition: color var(--transition-fast);
}

.topbar__item--link:hover,
.topbar__item--link:focus-visible {
  color: var(--color-yellow);
}

.topbar__note {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-yellow-soft);
}

.topbar__note::before {
  display: none;
}

@media (max-width: 575.98px) {
  .topbar__inner {
    justify-content: center;
    padding: 0 0.75rem;
  }

  .topbar__item {
    padding: 0.4rem 0.7rem;
    font-size: 0.72rem;
  }

  .topbar__item:first-child {
    padding-left: 0.7rem;
  }

  .topbar__note {
    margin-left: 0;
    flex-basis: 100%;
    text-align: center;
    border-top: 1px solid rgba(231, 178, 59, 0.3);
  }
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.site-header.is-stuck {
  background: rgba(255, 253, 248, 0.96);
  backdrop-filter: saturate(150%) blur(8px);
  box-shadow: 0 10px 24px -20px rgba(31, 26, 23, 0.9);
}

/* Three sections, full bleed: brand block | navigation | angled action panel */
.site-header__inner {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: -4px;
  min-height: var(--header-h);
  padding: 0 0 0 1rem;
  transition: min-height var(--transition-fast);
}

.site-header.is-stuck .site-header__inner {
  min-height: 62px;
}

/* Section 1 — brand and the counter shortcut */
.header-brand-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 0.55rem 0;
}

.header-brand-block::after {
  content: "";
  width: 1px;
  align-self: stretch;
  margin: 0.15rem 0;
  background: var(--color-line);
}

.counter-link {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1rem;
  color: var(--color-ink);
  white-space: nowrap;
}

.counter-link svg {
  color: var(--color-green);
}

.counter-link:hover,
.counter-link:focus-visible {
  color: var(--color-maroon);
}

@media (min-width: 1200px) {
  .counter-link {
    display: inline-flex;
  }
}

@media (max-width: 767.98px) {
  .header-brand-block::after {
    display: none;
  }
}

/* --- Brand ---------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--color-maroon);
  color: var(--color-yellow);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.3rem;
  line-height: 1;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  box-shadow: inset 0 0 0 2px var(--color-bg), inset 0 0 0 3px var(--color-maroon);
  transition: width var(--transition-fast), height var(--transition-fast);
}

.site-header.is-stuck .brand__mark {
  width: 38px;
  height: 38px;
  font-size: 1.15rem;
}

.brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand__word {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.32rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-maroon);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand__sub {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-green);
  white-space: nowrap;
}

/* Vertical ribbon beside the mark — the shop's stamp, read bottom-up */
.brand__ribbon {
  display: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--color-ink-soft);
  padding: 0.35rem 0.15rem;
  border-left: 2px solid var(--color-yellow);
  margin-left: 0.15rem;
}

@media (min-width: 992px) {
  .brand__ribbon {
    display: block;
  }
}

/* --- Menu button ----------------------------------------------------- */

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 8px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.mobile-menu-btn__bar {
  height: 2px;
  border-radius: 2px;
  background: var(--color-maroon);
}

.mobile-menu-btn__bar:nth-child(2) {
  background: var(--color-green);
}

.mobile-menu-btn__bar:nth-child(3) {
  background: var(--color-yellow);
}

.mobile-menu-btn[aria-expanded="true"] {
  background: var(--color-maroon);
  border-color: var(--color-maroon);
}

.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__bar {
  background: var(--color-yellow);
}

/* --- Primary navigation ---------------------------------------------- */

/* Section 2 — navigation, centred between the brand and the panel */
.primary-nav {
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav__link {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1rem;
  color: var(--color-ink-soft);
  padding: 0.35rem 1.05rem;
  transition: color var(--transition-fast);
}

/* Vertical rules between desktop nav items */
@media (min-width: 768px) {
  .primary-nav__list li + li .primary-nav__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: var(--color-line);
  }

  .primary-nav__link::after {
    content: "";
    position: absolute;
    left: 1.05rem;
    right: 1.05rem;
    bottom: -0.2rem;
    height: 3px;
    background: var(--color-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast);
  }

  .primary-nav__link:hover::after,
  .primary-nav__link:focus-visible::after,
  .primary-nav__link.is-active::after {
    transform: scaleX(1);
  }
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible,
.primary-nav__link.is-active {
  color: var(--color-maroon);
}

.primary-nav__link--accent {
  color: var(--color-green);
}

.primary-nav__link--muted {
  color: var(--color-ink-soft);
}

/* --- Section 3: angled action panel ----------------------------------- */

.header-panel {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  align-self: stretch;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.5rem 1.25rem 0.5rem 3.5rem;
  background: var(--color-maroon);
  color: #fff;
  /* The cut corner: the panel leans into the nav from the right edge */
  clip-path: polygon(58px 0, 100% 0, 100% 100%, 0 100%);
}

.panel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: #fff;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.panel-btn:hover,
.panel-btn:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-yellow);
}

.panel-btn:focus-visible {
  outline-color: var(--color-yellow);
}

.cart-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.cart-toggle__count {
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-yellow);
  color: var(--color-maroon-dark);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.panel-auth {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.5rem;
  padding: 0.6rem 1.4rem;
  background: var(--color-bg);
  color: var(--color-maroon);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 0.98rem;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.panel-auth:hover,
.panel-auth:focus-visible {
  background: var(--color-yellow);
  color: var(--color-maroon-dark);
}

/* Inline search field, revealed by the magnifier */
.panel-search {
  display: none;
  align-items: center;
  gap: 0.4rem;
}

.panel-search.is-open {
  display: flex;
}

.panel-search input {
  width: clamp(120px, 20vw, 190px);
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.88rem;
  outline: 0;
}

.panel-search input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.panel-search input:focus {
  border-color: var(--color-yellow);
}

@media (max-width: 991.98px) {
  .header-panel {
    padding-left: 2rem;
    clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%);
  }

  .panel-auth {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 575.98px) {
  .header-panel {
    gap: 0.15rem;
    padding: 0.4rem 0.75rem 0.4rem 1.5rem;
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
  }

  .panel-btn {
    width: 36px;
    height: 36px;
  }

  .panel-auth {
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
  }

  .panel-search.is-open input {
    width: 100px;
  }
}

/* --- Small screens: stacked panel with vertical colour markers -------- */

@media (max-width: 767.98px) {
  .mobile-menu-btn {
    display: flex;
  }

  .mobile-menu-btn {
    margin: 0 0.75rem 0 auto;
    align-self: center;
  }

  .primary-nav {
    order: 3;
    flex-basis: 100%;
    margin: 0;
    padding: 0 1rem 0.5rem;
    background: var(--color-bg);
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0.5rem 0 0.25rem;
    border-top: 1px solid var(--color-line);
  }

  .primary-nav__list li {
    border-bottom: 1px solid var(--color-bg-alt);
  }

  .primary-nav__list li:last-child {
    border-bottom: 0;
  }

  .primary-nav__link {
    padding: 0.8rem 0.9rem;
    font-size: 1.05rem;
    border-left: 4px solid transparent;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
  }

  .primary-nav__list li:nth-child(3n + 1) .primary-nav__link:hover,
  .primary-nav__list li:nth-child(3n + 1) .primary-nav__link.is-active {
    border-left-color: var(--color-maroon);
  }

  .primary-nav__list li:nth-child(3n + 2) .primary-nav__link:hover,
  .primary-nav__list li:nth-child(3n + 2) .primary-nav__link.is-active {
    border-left-color: var(--color-green);
  }

  .primary-nav__list li:nth-child(3n + 3) .primary-nav__link:hover,
  .primary-nav__list li:nth-child(3n + 3) .primary-nav__link.is-active {
    border-left-color: var(--color-yellow);
  }

  .primary-nav__link:hover,
  .primary-nav__link:focus-visible,
  .primary-nav__link.is-active {
    background: var(--color-bg-alt);
  }
}

@media (max-width: 399.98px) {
  .site-header__inner {
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
  }

  .brand__word {
    font-size: 1.1rem;
  }

  .brand__mark {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }

  .cart-toggle {
    padding: 0.5rem 0.6rem;
  }
}

/* Top navigation progress indicator */

.nav-progress {
  position: sticky;
  top: 0;
  z-index: 1031;
  height: 0px;
  width: 0%;
  background: var(--color-yellow);
  transition: width 220ms ease, opacity 220ms ease;
  opacity: 0;
}

.nav-progress.is-active {
  opacity: 1;
}

/* ==========================================================================
   Main content transition
   ========================================================================== */

.app-content {
  min-height: 60vh;
}

.app-content.is-transitioning {
  opacity: 0;
  transform: translateY(6px);
}

.app-content.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* ==========================================================================
   Flash message
   ========================================================================== */

.flash {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem 0.85rem 1.1rem;
  border-left: 4px solid var(--color-green);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.93rem;
}

.flash--error {
  border-left-color: var(--color-maroon);
  background: var(--color-maroon-tint);
}

/* ==========================================================================
   Hero slider (Swiper)
   A banner band — 360px on small screens, fluid above — with slide text that can be
   placed left, centre or right per slide.
   ========================================================================== */

.hero-slider {
  position: relative;
  height: clamp(160px, 26vw, 500px);
  background: var(--color-maroon-dark);
  overflow: hidden;
}

/* Small screens: a proper 360px band instead of shrinking with the viewport */
@media (max-width: 767.98px) {
  .hero-slider {
    height: 360px;
  }
}

.hero-slider .swiper,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
  height: 100%;
}

.hero-slide {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(86, 16, 24, 0.88) 0%, rgba(86, 16, 24, 0.55) 55%, rgba(86, 16, 24, 0.2) 100%);
}

.hero-slide__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
  color: #fff;
}

/* Text placement per slide */
.hero-slide--center .hero-slide__inner {
  align-items: center;
  text-align: center;
}

.hero-slide--center.hero-slide::before {
  background: linear-gradient(180deg, rgba(86, 16, 24, 0.55), rgba(86, 16, 24, 0.8));
}

.hero-slide--right .hero-slide__inner {
  align-items: flex-end;
  text-align: right;
}

.hero-slide--right.hero-slide::before {
  background: linear-gradient(270deg, rgba(86, 16, 24, 0.88) 0%, rgba(86, 16, 24, 0.55) 55%, rgba(86, 16, 24, 0.2) 100%);
}

.hero-slide__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-yellow);
  margin-bottom: 0.35rem;
}

.hero-slide__title {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.25rem, 3.6vw, 2rem);
  line-height: 1.12;
  color: #fff;
  margin: 0 0 0.3rem;
  max-width: 24ch;
}

.hero-slide__text {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 44ch;
}

.hero-slide__price {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--color-yellow);
}

/* Slide CTAs — same pill design as .btn-default, sized to sit comfortably
   inside the short banner band. Kept as its own class so this component
   stays independent of the page-level buttons. */
.hero-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.hero-slide--center .hero-slide__actions {
  justify-content: center;
}

.hero-slide--right .hero-slide__actions {
  justify-content: flex-end;
}

.hero-slide__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1em;
  text-transform: capitalize;
  background: var(--color-maroon);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 12px 42px 12px 18px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  white-space: nowrap;
  z-index: 1;
}

.hero-slide__btn-icon {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  transition: right 0.4s ease-in-out, background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

.hero-slide__btn-icon svg {
  width: 12px;
  height: 12px;
  transition: transform 0.4s ease-in-out;
}

.hero-slide__btn:hover,
.hero-slide__btn:focus-visible {
  background: var(--color-maroon-dark);
  color: #fff;
}

.hero-slide__btn:hover .hero-slide__btn-icon,
.hero-slide__btn:focus-visible .hero-slide__btn-icon {
  right: 3px;
  background: var(--color-yellow);
  color: var(--color-maroon-dark);
}

.hero-slide__btn:hover .hero-slide__btn-icon svg,
.hero-slide__btn:focus-visible .hero-slide__btn-icon svg {
  transform: translateX(2px);
}

.hero-slide__btn--yellow {
  background: var(--color-yellow);
  color: var(--color-ink);
}

.hero-slide__btn--yellow .hero-slide__btn-icon {
  background: rgba(31, 26, 23, 0.12);
  color: var(--color-ink);
}

.hero-slide__btn--yellow:hover,
.hero-slide__btn--yellow:focus-visible {
  background: var(--color-yellow-soft);
  color: var(--color-ink);
}

.hero-slide__btn--yellow:hover .hero-slide__btn-icon,
.hero-slide__btn--yellow:focus-visible .hero-slide__btn-icon {
  background: var(--color-maroon);
  color: #fff;
}

.hero-slider .swiper-pagination-bullet {
  width: 22px;
  height: 3px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.hero-slider .swiper-pagination-bullet-active {
  background: var(--color-yellow);
}

/* Bigger, more detailed prev/next controls: a crisper hand-drawn chevron
   (via mask so it stays perfectly sharp at any size) instead of Swiper's
   default font glyph, plus a hairline ring and a proper hover state. */
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
  background: var(--color-yellow);
  box-shadow: inset 0 0 0 1.5px var(--color-yellow);
  color: var(--color-maroon-dark);
  transform: scale(1.05);
}

.hero-slider .swiper-button-next::after,
.hero-slider .swiper-button-prev::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.hero-slider .swiper-button-prev::after {
  transform: scaleX(-1);
}

@media (max-width: 767.98px) {
  .hero-slider .swiper-button-next,
  .hero-slider .swiper-button-prev {
    width: 44px;
    height: 44px;
  }

  .hero-slider .swiper-button-next::after,
  .hero-slider .swiper-button-prev::after {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 575.98px) {
  .hero-slider .swiper-button-next,
  .hero-slider .swiper-button-prev {
    display: none;
  }

  .hero-slide__text {
    display: none;
  }

  .hero-slide__inner {
    padding: 0 1rem;
  }

  .hero-slide__actions {
    margin-top: 0.85rem;
  }

  .hero-slide__btn {
    font-size: 0.78rem;
    padding: 10px 36px 10px 15px;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: 4.5rem 0 4rem;
  background: var(--color-bg);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-green);
  margin-bottom: 1rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--color-yellow);
}

.hero__heading {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: 1.1rem;
}

.hero__description {
  max-width: 62ch;
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  margin-bottom: 1.75rem;
}

.hero__gallery {
  position: relative;
  z-index: 3;
  min-height: 260px;
  justify-self: center;
}

.hero__gallery-img {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  object-fit: cover;
  background: var(--color-bg-alt);
  cursor: pointer;
  transition:
    top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease,
    z-index 0s 0.275s;
}

.hero__gallery-img:hover {
  box-shadow: 0 14px 26px -16px rgba(31, 26, 23, 0.4);
}

.hero__gallery-img--back {
  top: 0;
  left: 0;
  transform: rotate(-4deg) scale(0.96);
  z-index: 1;
  box-shadow: 0 8px 16px -12px rgba(31, 26, 23, 0.3);
}

.hero__gallery-img--front {
  top: 60px;
  left: 90px;
  transform: rotate(3deg);
  box-shadow: 0 18px 30px -18px rgba(31, 26, 23, 0.35);
  z-index: 2;
}

@media (max-width: 767.98px) {
  /* Keep the two overlapping photos reading as one centred cluster on
     narrow screens — a fixed-width stage the images are positioned
     against as percentages, rather than the desktop's px offsets, and a
     clamped size so the photos never shrink too small or crowd the copy
     above them. */
  .hero__gallery {
    width: min(82vw, 320px);
    min-height: clamp(180px, 48vw, 260px);
    margin: 0 auto;
  }

  .hero__gallery-img {
    width: clamp(140px, 46vw, 200px) !important;
    height: clamp(140px, 46vw, 200px) !important;
  }

  .hero__gallery-img--back {
    top: 0;
    left: 2%;
  }

  .hero__gallery-img--front {
    top: 20%;
    left: 34%;
  }
}

@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .hero__gallery {
    justify-self: end;
    min-height: 320px;
    width: 100%;
  }

  .hero__gallery-img {
    width: 480px !important;
    height: 480px !important;
  }

  .hero__gallery-img--front {
    top: 80px;
    left: 110px;
  }

  .hero__gallery-img--back {
    transform: rotate(-4deg) scale(0.96);
  }
}

/* ==========================================================================
   Section heading
   ========================================================================== */

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-line);
}

.section-heading__title {
  font-size: 1.5rem;
  margin: 0;
}

.section-heading__link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.section-heading__link:hover,
.section-heading__link:focus-visible {
  color: var(--color-maroon);
}

/* ==========================================================================
   Product grid / cards
   ========================================================================== */

.products-notice {
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}

.featured,
.shop-grid-section {
  padding: 3rem 0 4rem;
}

/* The home page's "on sale" band picks up the same cream-to-alt wash and
   hairline rules as the sticky header, so scrolling past the hero into
   the product grid reads as one continuous surface rather than a hard
   cut between sections. */
.featured {
  position: relative;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  border-bottom: 1px solid var(--color-line);
}

.section-eyebrow {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 0.6rem;
}

.section-eyebrow--center {
  text-align: center;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-card-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.product-card:hover {
  border-color: var(--color-maroon);
  box-shadow: 0 22px 40px -28px rgba(31, 26, 23, 0.4);
  transform: translateY(-4px);
}

/* Butcher's chalkboard: charcoal with a green-slate cast, a lit centre
   and darker corners, and a few chalk-dust smudges. A cut-out PNG with a
   transparent background reads as though it's sitting on the board
   rather than floating on flat grey. */
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #23272a;
  background-image:
    radial-gradient(ellipse 120% 100% at 50% 40%, rgba(255, 253, 248, 0.08) 0%, rgba(255, 253, 248, 0) 58%),
    radial-gradient(ellipse 58% 38% at 17% 79%, rgba(255, 253, 248, 0.05) 0%, rgba(255, 253, 248, 0) 72%),
    radial-gradient(ellipse 44% 32% at 83% 21%, rgba(231, 178, 59, 0.045) 0%, rgba(231, 178, 59, 0) 72%),
    linear-gradient(162deg, #2c3230 0%, #1c201f 100%);
}

/* Fine chalk grain, drawn as inline SVG turbulence so there's no extra
   image request. Sits under the product image. */
.product-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E");
}

/* Faint chalk-drawn frame, the way a price board is ruled off. */
.product-card__media::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 253, 248, 0.11);
  border-radius: 3px;
}

.product-card__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Photos with their own background still fill the tile edge-to-edge
   (object-fit: cover, above). Add this class to a product image that is
   a cut-out PNG so it's inset and the board shows around it. */
.product-card__media--cutout img {
  object-fit: contain;
  padding: 14%;
}

.product-card__badge {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  z-index: 1;
}

.product-card__body {
  padding: 1.1rem 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.product-card__name {
  font-size: 1.02rem;
  margin: 0;
}

.product-card__description {
  color: var(--color-ink-soft);
  font-size: 0.88rem;
  margin: 0 0 0.4rem;
  flex: 1;
}

.product-card__price {
  margin: 0 0 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.product-card__price-current {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.1rem;
  color: var(--color-maroon);
}

.product-card__price-old {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  text-decoration: line-through;
}

/* ==========================================================================
   Hero — yellow secondary CTA
   ========================================================================== */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 0.85rem;
}

.hero__cta--alt {
  background: var(--color-yellow);
  color: var(--color-ink);
  border: 1px solid var(--color-yellow);
}

.hero__cta--alt:hover,
.hero__cta--alt:focus-visible {
  background: var(--color-yellow-soft);
  border-color: var(--color-yellow-soft);
  color: var(--color-ink);
}

/* ==========================================================================
   Heart strip — sits flush under the hero, no gap
   ========================================================================== */

.heart-strip {
  position: relative;
  /* Below .hero (z-index 2) so the hero's gallery photos overlap this
     strip rather than being painted over by it. */
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-maroon-dark);
  color: rgba(255, 253, 248, 0.92);
  padding: 3.5rem 0;
  text-align: center;
}

/* Original motif field inspired by traditional afro/mosaic patterns —
   small spirals, sunbursts, chevrons, dot clusters and grass-tuft marks,
   redrawn from scratch in the site's own yellow/green/maroon/cream tints
   so it reads as a decorative echo of the brand palette rather than a
   generic stock texture. Anchored to the left edge, then masked so it
   fades into an organic gap well before the centered copy. */
.heart-strip__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 62%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIj48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMzQgOTYuMiA4Ni40KSIgb3BhY2l0eT0iMC4zNCI+PGNpcmNsZSBjeD0iOTYuMiIgY3k9Ijg2LjQiIHI9IjIuMCIgZmlsbD0iI0U3QjIzQiIvPjxsaW5lIHgxPSI5OS45IiB5MT0iODYuNCIgeDI9IjEwNi43IiB5Mj0iODYuNCIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjIuMTA0NDYxNDM5OTEzNjUyMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9Ijk4LjAiIHkxPSI4OS42IiB4Mj0iMTAxLjQiIHkyPSI5NS41IiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4xMDQ0NjE0Mzk5MTM2NTIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iOTQuMyIgeTE9Ijg5LjYiIHgyPSI5MC45IiB5Mj0iOTUuNSIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjIuMTA0NDYxNDM5OTEzNjUyMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjkyLjQiIHkxPSI4Ni40IiB4Mj0iODUuNiIgeTI9Ijg2LjQiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIyLjEwNDQ2MTQzOTkxMzY1MjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSI5NC4zIiB5MT0iODMuMiIgeDI9IjkwLjkiIHkyPSI3Ny4yIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4xMDQ0NjE0Mzk5MTM2NTIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iOTguMCIgeTE9IjgzLjIiIHgyPSIxMDEuNCIgeTI9Ijc3LjIiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIyLjEwNDQ2MTQzOTkxMzY1MjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg4NyA0Ny4wIDIwNC4wKSIgb3BhY2l0eT0iMC4zMiI+PHBvbHlsaW5lIHBvaW50cz0iMzAuNCwyMDIuMyA0Ny4wLDE4Ny40IDYzLjYsMjAyLjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzhGQUU3RSIgc3Ryb2tlLXdpZHRoPSIyLjUwNDUwMDczMjU4NTM4OTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzNTEgMTU5LjAgMTk0LjUpIiBvcGFjaXR5PSIwLjMyIj48Y2lyY2xlIGN4PSIxNTkuMCIgY3k9IjE5NC41IiByPSIyLjIiIGZpbGw9IiNFN0IyM0IiLz48bGluZSB4MT0iMTYzLjAiIHkxPSIxOTQuNSIgeDI9IjE3MC41IiB5Mj0iMTk0LjUiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIxLjg3MDY3NTM0Mjg0NzAyMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE2MS45IiB5MT0iMTk3LjQiIHgyPSIxNjcuMSIgeTI9IjIwMi42IiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMS44NzA2NzUzNDI4NDcwMjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxNTkuMCIgeTE9IjE5OC41IiB4Mj0iMTU5LjAiIHkyPSIyMDYuMCIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjEuODcwNjc1MzQyODQ3MDIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTU2LjIiIHkxPSIxOTcuNCIgeDI9IjE1MC45IiB5Mj0iMjAyLjYiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIxLjg3MDY3NTM0Mjg0NzAyMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE1NS4wIiB5MT0iMTk0LjUiIHgyPSIxNDcuNiIgeTI9IjE5NC41IiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMS44NzA2NzUzNDI4NDcwMjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxNTYuMiIgeTE9IjE5MS43IiB4Mj0iMTUwLjkiIHkyPSIxODYuNCIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjEuODcwNjc1MzQyODQ3MDIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTU5LjAiIHkxPSIxOTAuNSIgeDI9IjE1OS4wIiB5Mj0iMTgzLjEiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIxLjg3MDY3NTM0Mjg0NzAyMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE2MS45IiB5MT0iMTkxLjciIHgyPSIxNjcuMSIgeTI9IjE4Ni40IiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMS44NzA2NzUzNDI4NDcwMjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzNyAxNTQuMyAzMjAuMSkiPjxwb2x5bGluZSBwb2ludHM9IjE1NC4zLDMyMC4xIDE1NC45LDMyMC4zIDE1NS4zLDMyMC45IDE1NS4zLDMyMS43IDE1NC43LDMyMi42IDE1My43LDMyMy4yIDE1Mi40LDMyMy4zIDE1MC45LDMyMi44IDE0OS41LDMyMS42IDE0OC42LDMxOS44IDE0OC41LDMxNy42IDE0OS4yLDMxNS4zIDE1MC45LDMxMy4zIDE1My40LDMxMS45IDE1Ni40LDMxMS40IDE1OS43LDMxMi4yIDE2Mi42LDMxNC4xIDE2NC43LDMxNy4yIDE2NS43LDMyMS4wIDE2NS4zLDMyNS4yIDE2My4zLDMyOS4xIDE1OS45LDMzMi4yIDE1NS40LDMzNC4wIDE1MC4zLDMzNC4xIDE0NS4zLDMzMi40IDE0MS4xLDMyOC44IDEzOC4zLDMyMy44IDEzNy4zLDMxOC4wIDEzOC42LDMxMS45IDE0MS45LDMwNi41IDE0Ny4yLDMwMi40IDE1My43LDMwMC40IDE2MC44LDMwMC44IDE2Ny40LDMwMy43IDE3Mi44LDMwOS4wIDE3Ni4yLDMxNS45IDE3Ni45LDMyMy44IDE3NC43LDMzMS43IDE2OS44LDMzOC42IDE2Mi43LDM0My40IDE1NC4xLDM0NS41IiBmaWxsPSJub25lIiBzdHJva2U9IiM4RkFFN0UiIHN0cm9rZS13aWR0aD0iMi4yOTUyMDc2NzQ1Mzg4NDMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC4yNyIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyODAgMTM3LjMgMjU0LjApIiBvcGFjaXR5PSIwLjM1Ij48Y2lyY2xlIGN4PSIxMzcuMyIgY3k9IjI1NC4wIiByPSIyLjQiIGZpbGw9IiNGNkRGQTYiLz48bGluZSB4MT0iMTQxLjciIHkxPSIyNTQuMCIgeDI9IjE0OS44IiB5Mj0iMjU0LjAiIHN0cm9rZT0iI0Y2REZBNiIgc3Ryb2tlLXdpZHRoPSIxLjkwNzg2MDA0OTc0OTg4NTkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxMzkuNSIgeTE9IjI1Ny43IiB4Mj0iMTQzLjYiIHkyPSIyNjQuOCIgc3Ryb2tlPSIjRjZERkE2IiBzdHJva2Utd2lkdGg9IjEuOTA3ODYwMDQ5NzQ5ODg1OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjEzNS4yIiB5MT0iMjU3LjciIHgyPSIxMzEuMSIgeTI9IjI2NC44IiBzdHJva2U9IiNGNkRGQTYiIHN0cm9rZS13aWR0aD0iMS45MDc4NjAwNDk3NDk4ODU5IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTMzLjAiIHkxPSIyNTQuMCIgeDI9IjEyNC45IiB5Mj0iMjU0LjAiIHN0cm9rZT0iI0Y2REZBNiIgc3Ryb2tlLXdpZHRoPSIxLjkwNzg2MDA0OTc0OTg4NTkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxMzUuMiIgeTE9IjI1MC4yIiB4Mj0iMTMxLjEiIHkyPSIyNDMuMSIgc3Ryb2tlPSIjRjZERkE2IiBzdHJva2Utd2lkdGg9IjEuOTA3ODYwMDQ5NzQ5ODg1OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjEzOS41IiB5MT0iMjUwLjIiIHgyPSIxNDMuNiIgeTI9IjI0My4xIiBzdHJva2U9IiNGNkRGQTYiIHN0cm9rZS13aWR0aD0iMS45MDc4NjAwNDk3NDk4ODU5IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTc4IDQ2LjEgMTUyLjEpIiBvcGFjaXR5PSIwLjM3Ij48cG9seWxpbmUgcG9pbnRzPSIzNi41LDE1MS4yIDQ2LjEsMTQyLjUgNTUuNywxNTEuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRjZERkE2IiBzdHJva2Utd2lkdGg9IjIuNDA5NTQ2MjY0NTE4MDM5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTc2IDIxNi42IDg2LjkpIiBvcGFjaXR5PSIwLjI3Ij48Y2lyY2xlIGN4PSIyMTYuNiIgY3k9Ijg2LjkiIHI9IjIuOCIgZmlsbD0iI0U3QjIzQiIvPjxjaXJjbGUgY3g9IjIyNC41IiBjeT0iODYuOSIgcj0iMi44IiBmaWxsPSIjRTdCMjNCIi8+PGNpcmNsZSBjeD0iMjA4LjgiIGN5PSI4Ni45IiByPSIyLjgiIGZpbGw9IiNFN0IyM0IiLz48Y2lyY2xlIGN4PSIyMTYuNiIgY3k9Ijk0LjciIHI9IjIuOCIgZmlsbD0iI0U3QjIzQiIvPjxjaXJjbGUgY3g9IjIxNi42IiBjeT0iNzkuMCIgcj0iMi44IiBmaWxsPSIjRTdCMjNCIi8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI1MCAyNjcuOCAxNTguMCkiIG9wYWNpdHk9IjAuMjIiPjxwb2x5bGluZSBwb2ludHM9IjI1Mi4xLDE0OS40IDI2Ny44LDE0Mi4zIDI4My41LDE0OS40IiBmaWxsPSJub25lIiBzdHJva2U9IiM4RkFFN0UiIHN0cm9rZS13aWR0aD0iMi43NTU3NDQ4NzYwODYzNDk3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cG9seWxpbmUgcG9pbnRzPSIyNTIuMSwxNjMuNiAyNjcuOCwxNTYuNSAyODMuNSwxNjMuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOEZBRTdFIiBzdHJva2Utd2lkdGg9IjIuNzU1NzQ0ODc2MDg2MzQ5NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI2MyAxOTUuNiA0OC42KSIgb3BhY2l0eT0iMC4yNyI+PGNpcmNsZSBjeD0iMTk1LjYiIGN5PSI0OC42IiByPSIyLjUiIGZpbGw9IiNFN0IyM0IiLz48Y2lyY2xlIGN4PSIyMDIuOCIgY3k9IjQ4LjYiIHI9IjIuNSIgZmlsbD0iI0U3QjIzQiIvPjxjaXJjbGUgY3g9IjE4OC4zIiBjeT0iNDguNiIgcj0iMi41IiBmaWxsPSIjRTdCMjNCIi8+PGNpcmNsZSBjeD0iMTk1LjYiIGN5PSI1NS44IiByPSIyLjUiIGZpbGw9IiNFN0IyM0IiLz48Y2lyY2xlIGN4PSIxOTUuNiIgY3k9IjQxLjQiIHI9IjIuNSIgZmlsbD0iI0U3QjIzQiIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjUgMjAyLjIgNDEwLjMpIiBvcGFjaXR5PSIwLjI1Ij48cG9seWxpbmUgcG9pbnRzPSIxODkuMiw0MDMuMiAyMDIuMiwzOTcuMyAyMTUuMSw0MDMuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGREY4IiBzdHJva2Utd2lkdGg9IjIuMTc0NTY2MjE5ODU1NzQzNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBvbHlsaW5lIHBvaW50cz0iMTg5LjIsNDE0LjggMjAyLjIsNDA5LjAgMjE1LjEsNDE0LjgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkRGOCIgc3Ryb2tlLXdpZHRoPSIyLjE3NDU2NjIxOTg1NTc0MzQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxNDEgNTUuNiAxMjkuMCkiIG9wYWNpdHk9IjAuMzIiPjxwb2x5bGluZSBwb2ludHM9IjQyLjIsMTIxLjYgNTUuNiwxMTUuNiA2OS4wLDEyMS42IiBmaWxsPSJub25lIiBzdHJva2U9IiNDOThBOTMiIHN0cm9rZS13aWR0aD0iMi43MDY3MDcwNjExNTMyMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBvbHlsaW5lIHBvaW50cz0iNDIuMiwxMzMuNiA1NS42LDEyNy42IDY5LjAsMTMzLjYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0M5OEE5MyIgc3Ryb2tlLXdpZHRoPSIyLjcwNjcwNzA2MTE1MzIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDI2Mi4wIDE0Mi41KSIgb3BhY2l0eT0iMC4yNSI+PHBhdGggZD0iTTI2Mi4wLDE0Mi41IFEyNjAuOCwxMzYuNCAyNTQuNywxMjguOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRjZERkE2IiBzdHJva2Utd2lkdGg9IjEuOTA1NzMwNjM3MDk0MjIyMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTI2Mi4wLDE0Mi41IFEyNjMuOCwxMzYuNiAyNjIuMCwxMjcuMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRjZERkE2IiBzdHJva2Utd2lkdGg9IjEuOTA1NzMwNjM3MDk0MjIyMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTI2Mi4wLDE0Mi41IFEyNjYuNCwxMzguMSAyNjkuMiwxMjguOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRjZERkE2IiBzdHJva2Utd2lkdGg9IjEuOTA1NzMwNjM3MDk0MjIyMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE3NSA3Ni40IDEyMi43KSI+PHBvbHlsaW5lIHBvaW50cz0iNzYuNCwxMjIuNyA3Ni45LDEyMi44IDc3LjIsMTIzLjMgNzcuMiwxMjQuMCA3Ni45LDEyNC43IDc2LjIsMTI1LjIgNzUuMiwxMjUuNSA3NC4wLDEyNS40IDcyLjgsMTI0LjcgNzEuOCwxMjMuNSA3MS4zLDEyMS45IDcxLjMsMTIwLjAgNzIuMSwxMTguMiA3My42LDExNi42IDc1LjYsMTE1LjUgNzguMSwxMTUuMSA4MC43LDExNS42IDgzLjIsMTE3LjEgODUuMSwxMTkuNCA4Ni4yLDEyMi40IDg2LjMsMTI1LjcgODUuMiwxMjkuMSA4Mi45LDEzMi4wIDc5LjcsMTM0LjEgNzUuOCwxMzUuMSA3MS42LDEzNC43IDY3LjcsMTMyLjkgNjQuNCwxMjkuOCA2Mi4yLDEyNS43IDYxLjUsMTIwLjkgNjIuNCwxMTUuOSA2NS4wLDExMS40IDY5LjAsMTA3LjggNzQuMSwxMDUuNyA3OS44LDEwNS40IDg1LjQsMTA3LjAgOTAuNCwxMTAuNCA5NC4xLDExNS40IDk2LjAsMTIxLjUgOTUuOCwxMjguMSA5My41LDEzNC4zIiBmaWxsPSJub25lIiBzdHJva2U9IiM4RkFFN0UiIHN0cm9rZS13aWR0aD0iMi4yNTMwNzI5Nzg5NjUxMTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC4zMyIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODYgMzE3LjYgMzIzLjgpIj48cG9seWxpbmUgcG9pbnRzPSIzMTcuNiwzMjMuOCAzMTguMywzMjQuMSAzMTguNiwzMjQuOCAzMTguNSwzMjUuOCAzMTcuOCwzMjYuNyAzMTYuNSwzMjcuMiAzMTQuOCwzMjcuMCAzMTMuMiwzMjYuMSAzMTIuMCwzMjQuNCAzMTEuNSwzMjIuMCAzMTIuMCwzMTkuNCAzMTMuNywzMTcuMSAzMTYuNCwzMTUuNCAzMTkuOCwzMTQuOCAzMjMuNCwzMTUuNyAzMjYuNiwzMTguMSAzMjguOCwzMjEuNyAzMjkuNSwzMjYuMSAzMjguNCwzMzAuNyAzMjUuNCwzMzQuOCAzMjEuMCwzMzcuNiAzMTUuNSwzMzguNiAzMDkuOCwzMzcuMyAzMDQuOCwzMzMuOSAzMDEuMywzMjguNiAzMDAuMCwzMjIuMSAzMDEuMiwzMTUuNCAzMDUuMSwzMDkuMyAzMTEuMSwzMDUuMCAzMTguNiwzMDMuMyAzMjYuNCwzMDQuNCAzMzMuNSwzMDguNiAzMzguNywzMTUuMyAzNDEuMCwzMjMuOCAzNDAuMCwzMzIuOCAzMzUuNiwzNDAuOSAzMjguMywzNDcuMCAzMTguOSwzNTAuMCAzMDguOCwzNDkuMyAyOTkuNSwzNDQuOCAyOTIuNCwzMzYuOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOEZBRTdFIiBzdHJva2Utd2lkdGg9IjIuNDk5NjEwNTQ3MzA3NTgxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9IjAuMTkiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTQ0IDIzMi40IDE5Mi42KSI+PHBvbHlsaW5lIHBvaW50cz0iMjMyLjQsMTkyLjYgMjMyLjgsMTkyLjggMjMzLjAsMTkzLjEgMjMzLjEsMTkzLjYgMjMyLjksMTk0LjEgMjMyLjUsMTk0LjUgMjMxLjgsMTk0LjggMjMxLjAsMTk0LjggMjMwLjEsMTk0LjUgMjI5LjIsMTkzLjggMjI4LjcsMTkyLjggMjI4LjQsMTkxLjYgMjI4LjYsMTkwLjIgMjI5LjMsMTg4LjkgMjMwLjQsMTg3LjggMjMyLjAsMTg3LjAgMjMzLjgsMTg2LjggMjM1LjcsMTg3LjIgMjM3LjUsMTg4LjIgMjM5LjAsMTg5LjggMjM5LjksMTkxLjkgMjQwLjIsMTk0LjMgMjM5LjYsMTk2LjcgMjM4LjMsMTk5LjAgMjM2LjMsMjAwLjggMjMzLjYsMjAyLjAgMjMwLjcsMjAyLjMgMjI3LjYsMjAxLjYgMjI0LjksMjAwLjAgMjIyLjYsMTk3LjUgMjIxLjMsMTk0LjQgMjIwLjksMTkwLjkgMjIxLjYsMTg3LjMgMjIzLjUsMTg0LjAgMjI2LjQsMTgxLjMgMjMwLjAsMTc5LjcgMjM0LjEsMTc5LjIgMjM4LjMsMTgwLjAgMjQyLjEsMTgyLjEgMjQ1LjIsMTg1LjQgMjQ3LjIsMTg5LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIxLjkyOTg0MjU1MDIxNzY3OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIwLjI1Ii8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDAgOTkuOCA0My4xKSIgb3BhY2l0eT0iMC4zMCI+PGNpcmNsZSBjeD0iOTkuOCIgY3k9IjQzLjEiIHI9IjIuMCIgZmlsbD0iI0U3QjIzQiIvPjxsaW5lIHgxPSIxMDMuNCIgeTE9IjQzLjEiIHgyPSIxMTAuMCIgeTI9IjQzLjEiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIyLjMyNDU5OTQyNjQyNDI5MTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxMDIuMyIgeTE9IjQ1LjciIHgyPSIxMDcuMCIgeTI9IjUwLjQiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIyLjMyNDU5OTQyNjQyNDI5MTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSI5OS44IiB5MT0iNDYuNyIgeDI9Ijk5LjgiIHkyPSI1My40IiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4zMjQ1OTk0MjY0MjQyOTE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iOTcuMiIgeTE9IjQ1LjciIHgyPSI5Mi41IiB5Mj0iNTAuNCIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjIuMzI0NTk5NDI2NDI0MjkxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9Ijk2LjIiIHkxPSI0My4xIiB4Mj0iODkuNSIgeTI9IjQzLjEiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIyLjMyNDU5OTQyNjQyNDI5MTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSI5Ny4yIiB5MT0iNDAuNiIgeDI9IjkyLjUiIHkyPSIzNS45IiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4zMjQ1OTk0MjY0MjQyOTE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iOTkuOCIgeTE9IjM5LjUiIHgyPSI5OS44IiB5Mj0iMzIuOSIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjIuMzI0NTk5NDI2NDI0MjkxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjEwMi4zIiB5MT0iNDAuNiIgeDI9IjEwNy4wIiB5Mj0iMzUuOSIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjIuMzI0NTk5NDI2NDI0MjkxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDEyNSA1OS40IDEzMS4wKSIgb3BhY2l0eT0iMC4zMiI+PHBhdGggZD0iTTU5LjQsMTMxLjAgUTU3LjYsMTIxLjYgNDguMiwxMDkuOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRjZERkE2IiBzdHJva2Utd2lkdGg9IjIuMDc5NTkzNjc1NDk1OTYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik01OS40LDEzMS4wIFE2Mi4zLDEyMS44IDU5LjQsMTA3LjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Y2REZBNiIgc3Ryb2tlLXdpZHRoPSIyLjA3OTU5MzY3NTQ5NTk2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNNTkuNCwxMzEuMCBRNjYuMiwxMjQuMiA3MC43LDEwOS45IiBmaWxsPSJub25lIiBzdHJva2U9IiNGNkRGQTYiIHN0cm9rZS13aWR0aD0iMi4wNzk1OTM2NzU0OTU5NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDM3IDEzNC4xIDU3LjgpIiBvcGFjaXR5PSIwLjI5Ij48Y2lyY2xlIGN4PSIxMzQuMSIgY3k9IjU3LjgiIHI9IjIuMCIgZmlsbD0iI0Y2REZBNiIvPjxjaXJjbGUgY3g9IjEzOS45IiBjeT0iNTcuOCIgcj0iMi4wIiBmaWxsPSIjRjZERkE2Ii8+PGNpcmNsZSBjeD0iMTI4LjMiIGN5PSI1Ny44IiByPSIyLjAiIGZpbGw9IiNGNkRGQTYiLz48Y2lyY2xlIGN4PSIxMzQuMSIgY3k9IjYzLjYiIHI9IjIuMCIgZmlsbD0iI0Y2REZBNiIvPjxjaXJjbGUgY3g9IjEzNC4xIiBjeT0iNTIuMCIgcj0iMi4wIiBmaWxsPSIjRjZERkE2Ii8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE5MCAyOS4yIDQzOC40KSI+PHBvbHlsaW5lIHBvaW50cz0iMjkuMiw0MzguNCAyOS43LDQzOC43IDMwLjAsNDM5LjIgMjkuOCw0NDAuMCAyOS4xLDQ0MC43IDI3LjksNDQxLjAgMjYuNiw0NDAuNiAyNS40LDQzOS42IDI0LjcsNDM4LjAgMjQuOCw0MzYuMCAyNS44LDQzNC4wIDI3LjcsNDMyLjUgMzAuMiw0MzEuOCAzMy4xLDQzMi4zIDM1LjcsNDM0LjAgMzcuNCw0MzYuOCAzOC4wLDQ0MC4zIDM3LjAsNDQzLjkgMzQuNSw0NDcuMCAzMC43LDQ0OS4wIDI2LjMsNDQ5LjMgMjEuOSw0NDcuNyAxOC4zLDQ0NC4zIDE2LjMsNDM5LjYgMTYuNCw0MzQuMyAxOC42LDQyOS4yIDIyLjksNDI1LjMgMjguNiw0MjMuMyAzNC44LDQyMy43IDQwLjUsNDI2LjcgNDQuNyw0MzIuMCA0Ni42LDQzOC42IDQ1LjYsNDQ1LjcgNDEuOCw0NTIuMCAzNS42LDQ1Ni40IDI4LjAsNDU4LjAgMjAuMSw0NTYuNSAxMy4zLDQ1MS44IDguOCw0NDQuNiA3LjQsNDM1LjkgOS43LDQyNy4zIiBmaWxsPSJub25lIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi40OTA2NjAwMjQyMzE3MzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC4zOSIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMzIgMTk1LjMgMTM0LjkpIiBvcGFjaXR5PSIwLjI5Ij48cG9seWxpbmUgcG9pbnRzPSIxODAuMCwxMzMuNCAxOTUuMywxMTkuNyAyMTAuNSwxMzMuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjIuMjYzNzMxOTk2MDM4MjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzMgMTY5LjQgMzY2LjkpIiBvcGFjaXR5PSIwLjI3Ij48Y2lyY2xlIGN4PSIxNjkuNCIgY3k9IjM2Ni45IiByPSIzLjUiIGZpbGw9IiNFN0IyM0IiLz48bGluZSB4MT0iMTc1LjciIHkxPSIzNjYuOSIgeDI9IjE4Ny41IiB5Mj0iMzY2LjkiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIxLjkxOTk1MDc5MDAzNzA4OTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxNzMuOSIgeTE9IjM3MS40IiB4Mj0iMTgyLjIiIHkyPSIzNzkuNiIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjEuOTE5OTUwNzkwMDM3MDg5OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE2OS40IiB5MT0iMzczLjIiIHgyPSIxNjkuNCIgeTI9IjM4NC45IiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMS45MTk5NTA3OTAwMzcwODk4IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTY1LjAiIHkxPSIzNzEuNCIgeDI9IjE1Ni43IiB5Mj0iMzc5LjYiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIxLjkxOTk1MDc5MDAzNzA4OTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxNjMuMSIgeTE9IjM2Ni45IiB4Mj0iMTUxLjQiIHkyPSIzNjYuOSIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjEuOTE5OTUwNzkwMDM3MDg5OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE2NS4wIiB5MT0iMzYyLjQiIHgyPSIxNTYuNyIgeTI9IjM1NC4xIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMS45MTk5NTA3OTAwMzcwODk4IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTY5LjQiIHkxPSIzNjAuNiIgeDI9IjE2OS40IiB5Mj0iMzQ4LjkiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIxLjkxOTk1MDc5MDAzNzA4OTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxNzMuOSIgeTE9IjM2Mi40IiB4Mj0iMTgyLjIiIHkyPSIzNTQuMSIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjEuOTE5OTUwNzkwMDM3MDg5OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDEwIDEwMy4zIDMyLjgpIiBvcGFjaXR5PSIwLjMxIj48Y2lyY2xlIGN4PSIxMDMuMyIgY3k9IjMyLjgiIHI9IjMuNCIgZmlsbD0iI0U3QjIzQiIvPjxjaXJjbGUgY3g9IjExMy4xIiBjeT0iMzIuOCIgcj0iMy40IiBmaWxsPSIjRTdCMjNCIi8+PGNpcmNsZSBjeD0iOTMuNSIgY3k9IjMyLjgiIHI9IjMuNCIgZmlsbD0iI0U3QjIzQiIvPjxjaXJjbGUgY3g9IjEwMy4zIiBjeT0iNDIuNSIgcj0iMy40IiBmaWxsPSIjRTdCMjNCIi8+PGNpcmNsZSBjeD0iMTAzLjMiIGN5PSIyMy4wIiByPSIzLjQiIGZpbGw9IiNFN0IyM0IiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzU2IDEyNS4wIDQzMi4zKSIgb3BhY2l0eT0iMC4zMCI+PGNpcmNsZSBjeD0iMTI1LjAiIGN5PSI0MzIuMyIgcj0iMi40IiBmaWxsPSIjRkZGREY4Ii8+PGxpbmUgeDE9IjEyOS4zIiB5MT0iNDMyLjMiIHgyPSIxMzcuMiIgeTI9IjQzMi4zIiBzdHJva2U9IiNGRkZERjgiIHN0cm9rZS13aWR0aD0iMS45MTgwMjM2OTgwNTE1OTAzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTI3LjEiIHkxPSI0MzYuMCIgeDI9IjEzMS4xIiB5Mj0iNDQyLjkiIHN0cm9rZT0iI0ZGRkRGOCIgc3Ryb2tlLXdpZHRoPSIxLjkxODAyMzY5ODA1MTU5MDMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxMjIuOCIgeTE9IjQzNi4wIiB4Mj0iMTE4LjgiIHkyPSI0NDIuOSIgc3Ryb2tlPSIjRkZGREY4IiBzdHJva2Utd2lkdGg9IjEuOTE4MDIzNjk4MDUxNTkwMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjEyMC43IiB5MT0iNDMyLjMiIHgyPSIxMTIuNyIgeTI9IjQzMi4zIiBzdHJva2U9IiNGRkZERjgiIHN0cm9rZS13aWR0aD0iMS45MTgwMjM2OTgwNTE1OTAzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTIyLjgiIHkxPSI0MjguNiIgeDI9IjExOC44IiB5Mj0iNDIxLjciIHN0cm9rZT0iI0ZGRkRGOCIgc3Ryb2tlLXdpZHRoPSIxLjkxODAyMzY5ODA1MTU5MDMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxMjcuMSIgeTE9IjQyOC42IiB4Mj0iMTMxLjEiIHkyPSI0MjEuNyIgc3Ryb2tlPSIjRkZGREY4IiBzdHJva2Utd2lkdGg9IjEuOTE4MDIzNjk4MDUxNTkwMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDIyMCAxMzMuOCA0NTMuNSkiIG9wYWNpdHk9IjAuMzUiPjxjaXJjbGUgY3g9IjEzMy44IiBjeT0iNDUzLjUiIHI9IjMuMiIgZmlsbD0iI0U3QjIzQiIvPjxsaW5lIHgxPSIxMzkuNiIgeTE9IjQ1My41IiB4Mj0iMTUwLjMiIHkyPSI0NTMuNSIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjIuMzAwNzg5Mjg0Njc4OTMxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjEzNi43IiB5MT0iNDU4LjUiIHgyPSIxNDIuMCIgeTI9IjQ2Ny43IiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4zMDA3ODkyODQ2Nzg5MzE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTMwLjkiIHkxPSI0NTguNSIgeDI9IjEyNS42IiB5Mj0iNDY3LjciIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIyLjMwMDc4OTI4NDY3ODkzMTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIxMjguMSIgeTE9IjQ1My41IiB4Mj0iMTE3LjQiIHkyPSI0NTMuNSIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjIuMzAwNzg5Mjg0Njc4OTMxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjEzMC45IiB5MT0iNDQ4LjUiIHgyPSIxMjUuNiIgeTI9IjQzOS4zIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4zMDA3ODkyODQ2Nzg5MzE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTM2LjciIHkxPSI0NDguNSIgeDI9IjE0Mi4wIiB5Mj0iNDM5LjMiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIyLjMwMDc4OTI4NDY3ODkzMTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgMjg3LjAgMzY0LjIpIiBvcGFjaXR5PSIwLjE5Ij48Y2lyY2xlIGN4PSIyODcuMCIgY3k9IjM2NC4yIiByPSIyLjMiIGZpbGw9IiNGNkRGQTYiLz48Y2lyY2xlIGN4PSIyOTMuNiIgY3k9IjM2NC4yIiByPSIyLjMiIGZpbGw9IiNGNkRGQTYiLz48Y2lyY2xlIGN4PSIyODAuMyIgY3k9IjM2NC4yIiByPSIyLjMiIGZpbGw9IiNGNkRGQTYiLz48Y2lyY2xlIGN4PSIyODcuMCIgY3k9IjM3MC45IiByPSIyLjMiIGZpbGw9IiNGNkRGQTYiLz48Y2lyY2xlIGN4PSIyODcuMCIgY3k9IjM1Ny42IiByPSIyLjMiIGZpbGw9IiNGNkRGQTYiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTQzIDIzMy42IDQ0Ny41KSIgb3BhY2l0eT0iMC4yNyI+PGNpcmNsZSBjeD0iMjMzLjYiIGN5PSI0NDcuNSIgcj0iMi4wIiBmaWxsPSIjRjZERkE2Ii8+PGNpcmNsZSBjeD0iMjM5LjUiIGN5PSI0NDcuNSIgcj0iMi4wIiBmaWxsPSIjRjZERkE2Ii8+PGNpcmNsZSBjeD0iMjI3LjgiIGN5PSI0NDcuNSIgcj0iMi4wIiBmaWxsPSIjRjZERkE2Ii8+PGNpcmNsZSBjeD0iMjMzLjYiIGN5PSI0NTMuNCIgcj0iMi4wIiBmaWxsPSIjRjZERkE2Ii8+PGNpcmNsZSBjeD0iMjMzLjYiIGN5PSI0NDEuNyIgcj0iMi4wIiBmaWxsPSIjRjZERkE2Ii8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMyNiA1NS4yIDg2LjUpIiBvcGFjaXR5PSIwLjMzIj48Y2lyY2xlIGN4PSI1NS4yIiBjeT0iODYuNSIgcj0iMy41IiBmaWxsPSIjQzk4QTkzIi8+PGNpcmNsZSBjeD0iNjUuMSIgY3k9Ijg2LjUiIHI9IjMuNSIgZmlsbD0iI0M5OEE5MyIvPjxjaXJjbGUgY3g9IjQ1LjMiIGN5PSI4Ni41IiByPSIzLjUiIGZpbGw9IiNDOThBOTMiLz48Y2lyY2xlIGN4PSI1NS4yIiBjeT0iOTYuNCIgcj0iMy41IiBmaWxsPSIjQzk4QTkzIi8+PGNpcmNsZSBjeD0iNTUuMiIgY3k9Ijc2LjYiIHI9IjMuNSIgZmlsbD0iI0M5OEE5MyIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxOTggMTgyLjggMTc0LjIpIiBvcGFjaXR5PSIwLjI0Ij48cGF0aCBkPSJNMTgyLjgsMTc0LjIgUTE4MS4yLDE2Ni4xIDE3My4xLDE1Ni4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4xMTU5NDg2MjgyNTk0MzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMTgyLjgsMTc0LjIgUTE4NS4yLDE2Ni4zIDE4Mi44LDE1My43IiBmaWxsPSJub25lIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4xMTU5NDg2MjgyNTk0MzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMTgyLjgsMTc0LjIgUTE4OC42LDE2OC40IDE5Mi40LDE1Ni4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4xMTU5NDg2MjgyNTk0MzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzE0IDMwMi42IDIxMC45KSIgb3BhY2l0eT0iMC4xOCI+PGNpcmNsZSBjeD0iMzAyLjYiIGN5PSIyMTAuOSIgcj0iMi41IiBmaWxsPSIjQzk4QTkzIi8+PGxpbmUgeDE9IjMwNy4xIiB5MT0iMjEwLjkiIHgyPSIzMTUuNSIgeTI9IjIxMC45IiBzdHJva2U9IiNDOThBOTMiIHN0cm9rZS13aWR0aD0iMS45NDQzMjM2MzU1MzUwMDA5IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMzA1LjgiIHkxPSIyMTQuMSIgeDI9IjMxMS43IiB5Mj0iMjIwLjAiIHN0cm9rZT0iI0M5OEE5MyIgc3Ryb2tlLXdpZHRoPSIxLjk0NDMyMzYzNTUzNTAwMDkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIzMDIuNiIgeTE9IjIxNS40IiB4Mj0iMzAyLjYiIHkyPSIyMjMuOCIgc3Ryb2tlPSIjQzk4QTkzIiBzdHJva2Utd2lkdGg9IjEuOTQ0MzIzNjM1NTM1MDAwOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjI5OS40IiB5MT0iMjE0LjEiIHgyPSIyOTMuNSIgeTI9IjIyMC4wIiBzdHJva2U9IiNDOThBOTMiIHN0cm9rZS13aWR0aD0iMS45NDQzMjM2MzU1MzUwMDA5IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMjk4LjEiIHkxPSIyMTAuOSIgeDI9IjI4OS43IiB5Mj0iMjEwLjkiIHN0cm9rZT0iI0M5OEE5MyIgc3Ryb2tlLXdpZHRoPSIxLjk0NDMyMzYzNTUzNTAwMDkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIyOTkuNCIgeTE9IjIwNy43IiB4Mj0iMjkzLjUiIHkyPSIyMDEuNyIgc3Ryb2tlPSIjQzk4QTkzIiBzdHJva2Utd2lkdGg9IjEuOTQ0MzIzNjM1NTM1MDAwOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjMwMi42IiB5MT0iMjA2LjQiIHgyPSIzMDIuNiIgeTI9IjE5Ny45IiBzdHJva2U9IiNDOThBOTMiIHN0cm9rZS13aWR0aD0iMS45NDQzMjM2MzU1MzUwMDA5IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMzA1LjgiIHkxPSIyMDcuNyIgeDI9IjMxMS43IiB5Mj0iMjAxLjciIHN0cm9rZT0iI0M5OEE5MyIgc3Ryb2tlLXdpZHRoPSIxLjk0NDMyMzYzNTUzNTAwMDkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg0NyA4Mi4xIDIwNC40KSIgb3BhY2l0eT0iMC4zMyI+PHBvbHlsaW5lIHBvaW50cz0iNjguNSwxOTYuOCA4Mi4xLDE5MC43IDk1LjgsMTk2LjgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0M5OEE5MyIgc3Ryb2tlLXdpZHRoPSIyLjcyMzQzNzQxOTYzMzYzMTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwb2x5bGluZSBwb2ludHM9IjY4LjUsMjA5LjEgODIuMSwyMDMuMCA5NS44LDIwOS4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNDOThBOTMiIHN0cm9rZS13aWR0aD0iMi43MjM0Mzc0MTk2MzM2MzE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDcgMjQ0LjggNDA2LjQpIiBvcGFjaXR5PSIwLjI0Ij48cGF0aCBkPSJNMjQ0LjgsNDA2LjQgUTI0My4yLDM5Ny44IDIzNC42LDM4Ny4yIiBmaWxsPSJub25lIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4xNjUxMzI3ODMzNzA5MDg0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMjQ0LjgsNDA2LjQgUTI0Ny40LDM5OC4xIDI0NC44LDM4NC42IiBmaWxsPSJub25lIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4xNjUxMzI3ODMzNzA5MDg0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMjQ0LjgsNDA2LjQgUTI1MS4wLDQwMC4zIDI1NS4wLDM4Ny4yIiBmaWxsPSJub25lIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi4xNjUxMzI3ODMzNzA5MDg0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNTEgMjIzLjggODUuOSkiPjxwb2x5bGluZSBwb2ludHM9IjIyMy44LDg1LjkgMjI0LjQsODYuMSAyMjQuNyw4Ni43IDIyNC43LDg3LjUgMjI0LjIsODguNCAyMjMuMiw4OS4wIDIyMS45LDg5LjEgMjIwLjQsODguNyAyMTkuMSw4Ny42IDIxOC4yLDg1LjkgMjE3LjksODMuOCAyMTguNSw4MS41IDIyMC4xLDc5LjQgMjIyLjQsNzcuOSAyMjUuMyw3Ny4zIDIyOC41LDc3LjggMjMxLjQsNzkuNiAyMzMuNyw4Mi40IDIzNS4wLDg2LjAgMjM0LjksOTAuMCAyMzMuMyw5NC4wIDIzMC4yLDk3LjMgMjI2LjAsOTkuNCAyMjEuMiwxMDAuMCAyMTYuMiw5OC44IDIxMS43LDk1LjggMjA4LjUsOTEuMyAyMDcuMCw4NS43IDIwNy40LDc5LjggMjEwLjEsNzQuMiAyMTQuNiw2OS42IDIyMC42LDY2LjkgMjI3LjUsNjYuMyAyMzQuMyw2OC4yIDI0MC4yLDcyLjUgMjQ0LjQsNzguNyAyNDYuMiw4Ni4yIDI0NS4zLDk0LjEgMjQxLjcsMTAxLjQgMjM1LjYsMTA3LjEgMjI3LjcsMTEwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzhGQUU3RSIgc3Ryb2tlLXdpZHRoPSIyLjE4NTk4OTYxMTA1NTA5MDciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC4yMiIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMCAyMjMuOSA0MDguNikiPjxwb2x5bGluZSBwb2ludHM9IjIyMy45LDQwOC42IDIyNC41LDQwOC44IDIyNC44LDQwOS4yIDIyNS4wLDQwOS44IDIyNC44LDQxMC42IDIyNC4zLDQxMS4yIDIyMy41LDQxMS44IDIyMi40LDQxMi4wIDIyMS4xLDQxMS44IDIxOS45LDQxMS4yIDIxOC44LDQxMC4xIDIxOC4xLDQwOC42IDIxNy44LDQwNi44IDIxOC4yLDQwNC44IDIxOS4xLDQwMy4wIDIyMC43LDQwMS4zIDIyMi44LDQwMC4yIDIyNS4zLDM5OS43IDIyOC4wLDQwMC4wIDIzMC42LDQwMS4xIDIzMy4wLDQwMy4wIDIzNC43LDQwNS42IDIzNS42LDQwOC44IDIzNS42LDQxMi4yIDIzNC42LDQxNS43IDIzMi41LDQxOC44IDIyOS41LDQyMS4zIDIyNS43LDQyMi44IDIyMS42LDQyMy4zIDIxNy4zLDQyMi41IDIxMy4zLDQyMC41IDIwOS45LDQxNy4yIDIwNy42LDQxMy4xIDIwNi40LDQwOC4yIDIwNi43LDQwMy4yIDIwOC41LDM5OC4yIDIxMS44LDM5My45IDIxNi4yLDM5MC42IDIyMS42LDM4OC42IDIyNy40LDM4OC4yIDIzMy4zLDM4OS41IiBmaWxsPSJub25lIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMi41MTUyMDk2NjIzOTI2NjQzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9IjAuMjIiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzUwIDQxLjggMTYzLjMpIiBvcGFjaXR5PSIwLjM0Ij48Y2lyY2xlIGN4PSI0MS44IiBjeT0iMTYzLjMiIHI9IjIuOSIgZmlsbD0iIzhGQUU3RSIvPjxsaW5lIHgxPSI0Ny4xIiB5MT0iMTYzLjMiIHgyPSI1Ni45IiB5Mj0iMTYzLjMiIHN0cm9rZT0iIzhGQUU3RSIgc3Ryb2tlLXdpZHRoPSIyLjI4NDQxNzI4NTY3MTk5MiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjQ0LjQiIHkxPSIxNjcuOCIgeDI9IjQ5LjMiIHkyPSIxNzYuMyIgc3Ryb2tlPSIjOEZBRTdFIiBzdHJva2Utd2lkdGg9IjIuMjg0NDE3Mjg1NjcxOTkyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMzkuMSIgeTE9IjE2Ny44IiB4Mj0iMzQuMiIgeTI9IjE3Ni4zIiBzdHJva2U9IiM4RkFFN0UiIHN0cm9rZS13aWR0aD0iMi4yODQ0MTcyODU2NzE5OTIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSIzNi41IiB5MT0iMTYzLjMiIHgyPSIyNi43IiB5Mj0iMTYzLjMiIHN0cm9rZT0iIzhGQUU3RSIgc3Ryb2tlLXdpZHRoPSIyLjI4NDQxNzI4NTY3MTk5MiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjM5LjEiIHkxPSIxNTguNyIgeDI9IjM0LjIiIHkyPSIxNTAuMiIgc3Ryb2tlPSIjOEZBRTdFIiBzdHJva2Utd2lkdGg9IjIuMjg0NDE3Mjg1NjcxOTkyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iNDQuNCIgeTE9IjE1OC43IiB4Mj0iNDkuMyIgeTI9IjE1MC4yIiBzdHJva2U9IiM4RkFFN0UiIHN0cm9rZS13aWR0aD0iMi4yODQ0MTcyODU2NzE5OTIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMzkgMTk2LjMgNDA1LjcpIiBvcGFjaXR5PSIwLjI3Ij48cGF0aCBkPSJNMTk2LjMsNDA1LjcgUTE5NC42LDM5Ni45IDE4NS44LDM4NS45IiBmaWxsPSJub25lIiBzdHJva2U9IiNFN0IyM0IiIHN0cm9rZS13aWR0aD0iMS44ODIyODA2NjE1MzgxMTEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xOTYuMyw0MDUuNyBRMTk4LjksMzk3LjEgMTk2LjMsMzgzLjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0U3QjIzQiIgc3Ryb2tlLXdpZHRoPSIxLjg4MjI4MDY2MTUzODExMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTE5Ni4zLDQwNS43IFEyMDIuNiwzOTkuNCAyMDYuOCwzODUuOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRTdCMjNCIiBzdHJva2Utd2lkdGg9IjEuODgyMjgwNjYxNTM4MTExIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjYgNTQuMSAyMTQuNSkiIG9wYWNpdHk9IjAuMzIiPjxjaXJjbGUgY3g9IjU0LjEiIGN5PSIyMTQuNSIgcj0iMy4xIiBmaWxsPSIjRTdCMjNCIi8+PGNpcmNsZSBjeD0iNjMuMSIgY3k9IjIxNC41IiByPSIzLjEiIGZpbGw9IiNFN0IyM0IiLz48Y2lyY2xlIGN4PSI0NS4yIiBjeT0iMjE0LjUiIHI9IjMuMSIgZmlsbD0iI0U3QjIzQiIvPjxjaXJjbGUgY3g9IjU0LjEiIGN5PSIyMjMuNSIgcj0iMy4xIiBmaWxsPSIjRTdCMjNCIi8+PGNpcmNsZSBjeD0iNTQuMSIgY3k9IjIwNS42IiByPSIzLjEiIGZpbGw9IiNFN0IyM0IiLz48L2c+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 30%, transparent 68%);
  mask-image: linear-gradient(to right, black 0%, black 30%, transparent 68%);
}

@media (max-width: 767.98px) {
  /* At narrow widths the centered copy spans nearly the full width, so
     the left-side texture would sit right under the text — fade it
     further back rather than removing it outright. */
  .heart-strip__pattern {
    width: 46%;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 15%, transparent 55%);
    mask-image: linear-gradient(to right, black 0%, black 15%, transparent 55%);
  }
}

.heart-strip__inner {
  position: relative;
  z-index: 1;
  max-width: 62ch;
  margin: 0 auto;
}

.heart-strip__eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin: 0 0 1rem;
}

.heart-strip__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 560;
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  line-height: 1.35;
  color: var(--color-yellow-soft);
  margin: 0 0 1.1rem;
}

.heart-strip__text {
  font-size: 0.95rem;
  color: rgba(255, 253, 248, 0.82);
  margin: 0;
}

/* ==========================================================================
   Shared section header (How it works / Why us / Testimonials)
   ========================================================================== */

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.section-header__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 0.6rem;
}

.section-header__subtitle {
  color: var(--color-ink-soft);
  margin: 0;
}

/* ==========================================================================
   How it works
   ========================================================================== */

.how-it-works {
  position: relative;
  padding: 5rem 0;
  background:
    linear-gradient(165deg, var(--color-bg) 0%, var(--color-bg) 55%, var(--color-bg-alt) 150%);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

/* Open columns rather than four boxed cards. The cards were repeating the
   chrome already carried by .product-card and .why-us, so the section read
   as a third variation on the same rounded-white-box. Here the numbered
   disc does the structural work — it is a genuine sequence, so numbering
   earns its place — and a dashed rule threads the four discs together so
   the eye reads a path instead of four separate items. */
.how-it-works__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 0;
  padding: 0.5rem 0 0;
  list-style: none;
}

/* The thread. Inset to the centre of the first and last disc so it links
   them rather than running off the edges of the section. */
.how-it-works__grid::before {
  content: "";
  position: absolute;
  /* 0.5rem grid padding + half the 84px disc = 50px, less half the
     rule's own height. */
  top: 49px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  z-index: 0;
  background-image: linear-gradient(to right, var(--color-line) 0 7px, transparent 7px 16px);
  background-size: 16px 2px;
  background-repeat: repeat-x;
}

.how-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 0.35rem;
}

/* The disc: cream-white so it punches a hole in the dashed thread behind
   it, ringed in the step's own brand colour. */
.how-step__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: var(--color-card-bg);
  box-shadow:
    0 0 0 1px var(--color-line),
    0 14px 26px -18px rgba(31, 26, 23, 0.45);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.how-step__icon svg {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One hue per step, matching the rotation already used across the site. */
.how-step:nth-child(1) .how-step__icon { color: var(--color-maroon); }
.how-step:nth-child(2) .how-step__icon { color: var(--color-green); }
.how-step:nth-child(3) .how-step__icon { color: #a97a16; }
.how-step:nth-child(4) .how-step__icon { color: var(--color-maroon-dark); }

.how-step:hover .how-step__icon,
.how-step:focus-within .how-step__icon {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px currentColor,
    0 20px 32px -18px rgba(31, 26, 23, 0.5);
}

/* Count chip, sat on the disc's lower-right the way the reference layout
   pins its number to the icon. */
.how-step__count {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--color-bg);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.78rem;
  line-height: 1;
  /* currentColor here is the step hue inherited from .how-step__icon —
     don't set `color` on this element or the fill turns white. */
  background: currentColor;
}

.how-step__count::after {
  content: attr(data-step);
  color: #fff;
}

.how-step:nth-child(3) .how-step__count::after {
  color: var(--color-ink);
}

.how-step__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 620;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.how-step__text {
  max-width: 26ch;
  margin: 0 auto;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 991.98px) {
  .how-it-works__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.75rem;
  }

  /* The thread only reads as a sequence on a single row. */
  .how-it-works__grid::before {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .how-it-works {
    padding: 3.5rem 0;
  }

  .how-it-works__grid {
    grid-template-columns: 1fr;
    row-gap: 2.25rem;
  }

  .how-step__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 1.1rem;
  }

  .how-step__icon svg {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-step__icon {
    transition: none;
  }

  .how-step:hover .how-step__icon,
  .how-step:focus-within .how-step__icon {
    transform: none;
  }
}

/* ==========================================================================
   Why Kutswa Meats
   ========================================================================== */

.why-us {
  padding: 4.5rem 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.why-us__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* --- Story banner: photo + maroon overlay + yellow headline ----------
   Same overlay mechanism as the hero slider (hero-slide::before): a
   maroon gradient laid over a photo, darkest where the type sits, so
   the section carries an actual image instead of another plain card. */

.why-us__story {
  position: relative;
  min-height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-maroon-dark);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.why-us__story::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(122, 31, 43, 0.35) 0%, rgba(86, 16, 24, 0.9) 100%);
}

.why-us__story-overlay {
  position: relative;
  z-index: 1;
  padding: 2.25rem;
}

.why-us__story-eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin: 0 0 0.7rem;
}

.why-us__story-title {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.15;
  color: var(--color-yellow);
  margin: 0 0 0.75rem;
}

.why-us__story-text {
  color: rgba(255, 253, 248, 0.88);
  max-width: 36ch;
  font-size: 0.92rem;
  margin: 0;
}

/* --- Editorial list, replacing the checkmark-card grid ---------------- */

.why-us__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.why-us__row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--color-line);
  transition: padding-left var(--transition-fast);
}

.why-us__row:first-child {
  padding-top: 0;
}

.why-us__row:last-child {
  border-bottom: none;
}

.why-us__row:hover {
  padding-left: 0.4rem;
}

.why-us__row-index {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-maroon);
  opacity: 0.45;
  min-width: 2.2ch;
}

.why-us__row-title {
  font-size: 1.02rem;
  margin: 0 0 0.4rem;
}

.why-us__row-text {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  margin: 0;
}

@media (min-width: 992px) {
  .why-us__layout {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
  }

  .why-us__story {
    min-height: 100%;
  }

  .why-us__list {
    justify-content: center;
  }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials {
  padding: 4.5rem 0;
  background: var(--color-bg);
}

.testimonial-card {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

@media (min-width: 768px) {
  .testimonial-card {
    padding: 0 3rem;
  }
}

.testimonial-card__avatar {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-bg-alt-2);
  border: 1px solid var(--color-line);
  box-shadow: 0 6px 16px -8px rgba(31, 26, 23, 0.4);
  object-fit: cover;
  margin: 0 auto 1.25rem;
}

.testimonial-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0 0 1rem;
}

.testimonial-card__name {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

/* Same slider mechanism as .hero-slider (Swiper), scoped to
   .testimonial-slider so the two instances never clash. */

.testimonial-slider {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

/* Swiper's JS assumes its own stylesheet has already set up the track
   (overflow clipping on .swiper, a flex row on .swiper-wrapper, slides
   that don't shrink or wrap). If that stylesheet fails to load for any
   reason, Swiper still runs but has nothing to animate against, so the
   slides just stack vertically like a plain list. Declaring the same
   essentials here — scoped to this instance only — means the carousel
   works even if the shared library CSS is ever missing or loads late. */
.testimonial-slider .swiper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.testimonial-slider .swiper-wrapper {
  position: relative;
  display: flex;
  box-sizing: content-box;
  transition-property: transform;
}

.testimonial-slider .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: auto;
}

.testimonial-slider .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 2rem;
}

.testimonial-slider .swiper-pagination-bullet {
  width: 22px;
  height: 3px;
  margin: 0 !important;
  border-radius: 0;
  background: var(--color-line);
  opacity: 1;
  transition: background-color var(--transition-fast);
}

.testimonial-slider .swiper-pagination-bullet-active {
  background: var(--color-maroon);
}

.testimonial-slider .swiper-button-next,
.testimonial-slider .swiper-button-prev {
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  color: var(--color-maroon);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.testimonial-slider .swiper-button-next:hover,
.testimonial-slider .swiper-button-prev:hover {
  background: var(--color-maroon);
  color: #fff;
}

.testimonial-slider .swiper-button-prev {
  left: 8px;
}

.testimonial-slider .swiper-button-next {
  right: 8px;
}

.testimonial-slider .swiper-button-next::after,
.testimonial-slider .swiper-button-prev::after {
  font-size: 0.85rem;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .testimonial-slider .swiper-button-next,
  .testimonial-slider .swiper-button-prev {
    display: none;
  }
}

/* ==========================================================================
   Decorative watermarks
   Faint outline icons (steak, T-bone, drumstick, hamper) laid over the
   cream/white sections so they don't read as flat empty space. Purely
   decorative: hidden from assistive tech, ignore clicks, and sit low
   enough in opacity that they never compete with the copy on top.
   ========================================================================== */

.how-it-works,
.testimonials {
  position: relative;
  overflow: hidden;
}

/* The hero deliberately does NOT clip its contents: the gallery photos
   are 480px tall in a 320px stage, so they spill past the hero's bottom
   edge and are meant to sit *over* the maroon heart strip below.
   `overflow: hidden` here was cutting them off at the section boundary.

   `overflow-x: clip` keeps the sideways spill (the front photo is offset
   110px inside a ~485px column) from producing a horizontal scrollbar,
   while leaving vertical overflow visible — the one thing `hidden`
   cannot do, since it would force the other axis to scroll too.

   z-index 2 lifts the whole hero above .heart-strip (z-index 1). The
   strip sets `isolation: isolate`, so it is its own stacking context;
   raising z-index on .hero__gallery alone could never escape it. */
.hero {
  position: relative;
  z-index: 2;
  overflow-x: clip;
  overflow-y: visible;
}

.hero .container,
.how-it-works .container,
.testimonials .container {
  position: relative;
  z-index: 1;
}

.hero::before,
.hero::after,
.how-it-works::before,
.how-it-works::after,
.testimonials::before,
.testimonials::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}

/* "Quality meat, simple shopping" — steak (top right) + hamper (bottom left) */
.hero::before {
  top: 10px;
  right: 2%;
  width: 300px;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20,55 C18,43 27,30 42,27 C57,24 76,31 81,43 C87,57 78,73 64,79 C49,85 29,82 23,70 C21,66 20,60 20,55 Z' fill='none' stroke='%23C9C9C9' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cellipse cx='59' cy='51' rx='9' ry='6' fill='none' stroke='%23C9C9C9' stroke-width='2'/%3E%3Cpath d='M30,47 C36,40 43,37 51,37 M28,61 C36,68 43,71 51,72' fill='none' stroke='%23C9C9C9' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='42' cy='54' r='2.2' fill='none' stroke='%23C9C9C9' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Was bottom: -10px, which relied on the hero clipping it. The hero no
   longer clips, so pull it flush to the edge instead. */
.hero::after {
  bottom: 0;
  left: 1%;
  width: 260px;
  height: 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M21,38 L79,38 L74,78 C73,83 70,86 65,86 L35,86 C30,86 27,83 26,78 Z' fill='none' stroke='%23C9C9C9' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M21,38 L50,49 L79,38 L50,27 Z' fill='none' stroke='%23C9C9C9' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M50,49 L50,86' fill='none' stroke='%23C9C9C9' stroke-width='2'/%3E%3Cpath d='M35,34 C34,25 40,19 46,19 C51,19 53,24 50,29 C47,34 40,36 35,34 Z' fill='none' stroke='%23C9C9C9' stroke-width='2'/%3E%3Cpath d='M65,34 C66,25 60,19 54,19 C49,19 47,24 50,29 C53,34 60,36 65,34 Z' fill='none' stroke='%23C9C9C9' stroke-width='2'/%3E%3Cpath d='M50,28 L50,20' fill='none' stroke='%23C9C9C9' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* "How it works" — T-bone (top left) + drumstick (bottom right) */
.how-it-works::before {
  top: 5px;
  left: 1%;
  width: 280px;
  height: 280px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M48,18 C43,17 39,21 39,26 C39,30 42,33 46,34 L42,43 C35,43 27,48 24,56 C20,66 25,77 35,80 C45,83 54,77 56,68 L59,59 C64,62 70,61 74,57 C79,52 78,44 73,40 C69,36 63,36 58,39 L54,30 C57,27 58,22 55,20 C53,18 51,18 48,18 Z' fill='none' stroke='%23C9C9C9' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M49,34 L52,45 L48,55 L53,64' fill='none' stroke='%23C9C9C9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='35' cy='62' rx='5' ry='7' fill='none' stroke='%23C9C9C9' stroke-width='1.7'/%3E%3Ccircle cx='68' cy='48' r='4' fill='none' stroke='%23C9C9C9' stroke-width='1.7'/%3E%3C/svg%3E");
}

.how-it-works::after {
  bottom: -15px;
  right: 1%;
  width: 300px;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M43,27 C35,22 27,25 25,32 C23,39 28,44 35,45 C27,51 23,61 27,71 C32,83 46,87 57,82 C68,77 72,64 67,53 C64,46 58,42 52,39 C55,34 50,29 43,27 Z' fill='none' stroke='%23C9C9C9' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M52,39 C59,35 66,37 70,43 C74,49 72,55 67,58' fill='none' stroke='%23C9C9C9' stroke-width='2.3' stroke-linecap='round'/%3E%3Ccircle cx='35' cy='35' r='2' fill='none' stroke='%23C9C9C9' stroke-width='1.5'/%3E%3Cpath d='M28,59 Q39,54 50,59 M31,69 Q42,64 57,68' fill='none' stroke='%23C9C9C9' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M67,42 L75,38 M70,46 L79,45' fill='none' stroke='%23C9C9C9' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* "In their words" — drumstick (top left) + steak (bottom right) */
.testimonials::before {
  top: 0;
  left: 2%;
  width: 240px;
  height: 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24,37 L78,37 L72,77 C71,82 68,85 63,85 L38,85 C33,85 30,82 29,77 Z' fill='none' stroke='%23C9C9C9' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M34,37 C34,24 41,17 50,17 C59,17 66,24 66,37' fill='none' stroke='%23C9C9C9' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M29,48 L75,48 M30,60 L73,60 M31,71 L71,71' fill='none' stroke='%23C9C9C9' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M24,37 L18,32 L14,32' fill='none' stroke='%23C9C9C9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M43,37 L47,84 M58,37 L55,84' fill='none' stroke='%23C9C9C9' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.testimonials::after {
  bottom: -20px;
  right: 2%;
  width: 280px;
  height: 280px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24,67 C18,61 19,51 25,47 C31,43 39,45 43,51 L67,75 C72,80 80,79 83,74 C87,69 85,62 80,58' fill='none' stroke='%23C9C9C9' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M31,42 C37,37 45,38 50,43 L75,68 C80,73 87,71 89,66 C91,61 89,55 84,51' fill='none' stroke='%23C9C9C9' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M38,48 L32,54 M47,57 L41,63 M56,66 L50,72 M65,75 L59,81' fill='none' stroke='%23C9C9C9' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='25' cy='47' r='2.2' fill='none' stroke='%23C9C9C9' stroke-width='1.5'/%3E%3C/svg%3E");
}

@media (max-width: 767.98px) {
  .hero::before,
  .how-it-works::before,
  .testimonials::before,
  .hero::after,
  .how-it-works::after,
  .testimonials::after {
    width: 160px;
    height: 160px;
  }
}

/* ==========================================================================
   Shop intro
   ========================================================================== */

.shop-intro {
  padding: 3.5rem 0 1rem;
}

.shop-intro__title {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin-bottom: 0.5rem;
}

.shop-intro__text {
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin: 0;
}

/* ==========================================================================
   Cart offcanvas
   ========================================================================== */

.cart-offcanvas {
  width: min(400px, 100vw);
  background: var(--color-bg);
}

.cart-offcanvas .offcanvas-header {
  border-bottom: 3px solid var(--color-yellow);
}

.cart-offcanvas__title {
  font-size: 1.2rem;
  color: var(--color-maroon);
}

.cart-offcanvas__body {
  display: flex;
  flex-direction: column;
}

.cart-empty {
  text-align: center;
  padding: 2rem 0;
  color: var(--color-ink-soft);
}

.cart-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

.cart-item {
  display: flex;
  gap: 0.8rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-line);
}

.cart-item__image {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-bg-alt);
  flex-shrink: 0;
}

.cart-item__info {
  flex: 1;
  min-width: 0;
}

.cart-item__name {
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0 0 0.2rem;
}

.cart-item__price {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin: 0 0 0.45rem;
}

.cart-item__controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cart-item__qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: #fff;
  line-height: 1;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-item__qty-btn:hover,
.cart-item__qty-btn:focus-visible {
  border-color: var(--color-green);
  color: var(--color-green);
}

.cart-item__qty {
  min-width: 1.2rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}

.cart-item__remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-ink-soft);
  font-size: 0.8rem;
  text-decoration: underline;
  padding: 0;
}

.cart-item__remove:hover,
.cart-item__remove:focus-visible {
  color: var(--color-maroon);
}

.cart-summary {
  border-top: 1px solid var(--color-line);
  padding-top: 1rem;
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
  color: var(--color-ink-soft);
}

.cart-summary__row--total {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.checkout-btn {
  width: 100%;
  background: var(--color-maroon);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.checkout-btn:hover,
.checkout-btn:focus-visible {
  background: var(--color-maroon-dark);
  color: #fff;
}

.checkout-btn__note {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-yellow-soft);
}

/* ==========================================================================
   Sign-in modal
   ========================================================================== */

.signin-modal__body {
  text-align: center;
  padding: 2.5rem 2rem;
}

.signin-modal__body svg {
  color: var(--color-maroon);
  margin-bottom: 1rem;
}

.signin-modal__title {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.signin-modal__text {
  color: var(--color-ink-soft);
  margin-bottom: 1.5rem;
}

.signin-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.signin-modal__dismiss {
  margin-top: 1rem;
  background: none;
  border: none;
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  text-decoration: underline;
}

@media (min-width: 400px) {
  .signin-modal__actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* ==========================================================================
   Brand logo (image mode) — see brand.php
   Fixed height / auto width, sized to match .brand__mark so switching
   between the letter mark and the image never changes the header height.
   ========================================================================== */

.brand__logo {
  display: block;
  flex-shrink: 0;
  height: 44px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  transition: height var(--transition-fast);
}

.site-header.is-stuck .brand__logo {
  height: 38px;
}

@media (max-width: 399.98px) {
  .brand__logo {
    height: 36px;
    max-width: 80px;
  }
}

/* ==========================================================================
   Site footer
   Deep-maroon bookend to the header's top bar. Same tokens, same Fraunces /
   Inter pairing, same arch-shaped brand mark and pill buttons as the header,
   with the yellow/green "stitching" stripe along the top edge.
   ========================================================================== */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Photo visibility: lower these three (0–1) to show more of the banner
     image, raise them for more contrast behind the text. */
  --footer-wash-top: 0.5;
  --footer-wash-mid: 0.74;
  --footer-wash-bottom: 0.9;

  margin-top: clamp(2rem, 6vw, 4rem);
  color: rgba(255, 253, 248, 0.82);
  background-color: var(--color-maroon-dark);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

/* Photo (set inline as --footer-bg) under a maroon wash, plus a warm glow */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 92% 0%, rgba(231, 178, 59, 0.14), transparent 70%),
    linear-gradient(
      180deg,
      rgba(86, 16, 24, var(--footer-wash-top)) 0%,
      rgba(58, 12, 17, var(--footer-wash-mid)) 55%,
      rgba(34, 9, 12, var(--footer-wash-bottom)) 100%
    ),
    var(--footer-bg, none) center 35% / cover no-repeat;
}

/* Stitching stripe */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: repeating-linear-gradient(
    115deg,
    var(--color-yellow) 0 22px,
    var(--color-yellow-soft) 22px 26px,
    var(--color-green) 26px 48px,
    var(--color-green-dark) 48px 52px
  );
}

.site-footer a {
  text-decoration: none;
}

.site-footer .container {
  padding-inline: clamp(1.1rem, 5vw, 1.5rem);
}

.site-footer :focus-visible {
  outline-color: var(--color-yellow);
}

/* --- Call to action ---------------------------------------------------- */

.site-footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  padding: 4.5rem 0 3.25rem;
  border-bottom: 1px solid rgba(231, 178, 59, 0.28);
}

.site-footer__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.site-footer__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-yellow);
}

.site-footer__cta-title {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(20, 4, 6, 0.55);
}

.site-footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* --- Columns ------------------------------------------------------------ */

.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.75rem 3rem;
  padding: 3.25rem 0;
}

.site-footer__col {
  flex: 1 1 200px;
  min-width: 0;
}

.site-footer__brandcol {
  flex: 1.7 1 280px;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: #fff;
}

/* Image logo: fixed height, auto width — the row never grows past the mark's */
.site-footer__brand .brand__logo {
  height: 46px;
  max-width: 110px;
}

/* Header's arch mark, inverted for the dark ground */
.site-footer .brand__mark {
  background: var(--color-yellow);
  color: var(--color-maroon-dark);
  box-shadow: inset 0 0 0 2px var(--color-maroon-dark), inset 0 0 0 3px var(--color-yellow);
}

.site-footer__brand-word {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.site-footer__blurb {
  max-width: 34ch;
  margin: 1.1rem 0 1.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--color-yellow-soft);
}

.site-footer__heading {
  position: relative;
  margin: 0 0 1.4rem;
  padding-bottom: 0.85rem;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.15rem;
  color: var(--color-yellow);
}

.site-footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: var(--color-yellow);
  opacity: 0.7;
}

/* Social */

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(246, 223, 166, 0.35);
  color: var(--color-yellow-soft);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-maroon-dark);
  transform: translateY(-3px);
}

/* Quick links */

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  color: rgba(255, 253, 248, 0.82);
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.site-footer__links a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 0 1px rgba(156, 201, 140, 0.6);
  transition: background-color var(--transition-fast);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--color-yellow);
  gap: 0.85rem;
}

.site-footer__links a:hover::before,
.site-footer__links a:focus-visible::before {
  background: var(--color-yellow);
}

/* Contact */

.site-footer__info,
.site-footer__hours {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__info {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.site-footer__info li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  line-height: 1.45;
}

.site-footer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.08);
  color: var(--color-yellow);
}

.site-footer__info a {
  color: rgba(255, 253, 248, 0.9);
  overflow-wrap: anywhere;
  transition: color var(--transition-fast);
}

.site-footer__info a:hover,
.site-footer__info a:focus-visible {
  color: var(--color-yellow);
}

.site-footer__info-text {
  padding-top: 0.32rem;
  min-width: 0;
}

/* Opening hours */

.site-footer__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed rgba(246, 223, 166, 0.25);
}

.site-footer__hours li:first-child {
  padding-top: 0;
}

.site-footer__hours li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.site-footer__hours-day {
  color: #fff;
  font-weight: 600;
}

.site-footer__hours li span:last-child {
  text-align: right;
}

/* --- Bottom bar ---------------------------------------------------------- */

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid rgba(231, 178, 59, 0.28);
  font-size: 0.85rem;
  color: rgba(255, 253, 248, 0.7);
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__top-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.4rem 0.35rem 1rem;
  border: 1px solid rgba(246, 223, 166, 0.35);
  border-radius: 100px;
  background: transparent;
  color: var(--color-yellow-soft);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.site-footer__top-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-maroon-dark);
  transition: transform 0.3s ease;
}

.site-footer__top-btn:hover,
.site-footer__top-btn:focus-visible {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-maroon-dark);
}

.site-footer__top-btn:hover span,
.site-footer__top-btn:focus-visible span {
  background: var(--color-maroon-dark);
  color: var(--color-yellow);
  transform: translateY(-3px);
}

@media (max-width: 991.98px) {
  .site-footer__col {
    flex: 1 1 calc(50% - 1rem);
  }

  .site-footer__brandcol {
    flex: 1 1 100%;
  }
}

@media (max-width: 767.98px) {
  .site-footer__cta {
    padding: 3.25rem 0 2.25rem;
  }

  .site-footer__grid {
    gap: 2.25rem 1.5rem;
    padding: 2.25rem 0;
  }
}

@media (max-width: 575.98px) {
  .site-footer__cta {
    gap: 1.5rem;
    padding: 2.75rem 0 2rem;
  }

  .site-footer__cta-title {
    max-width: none;
  }

  .site-footer__cta-actions {
    width: 100%;
    flex-direction: column;
  }

  .site-footer__cta-actions .btn-default {
    width: 100%;
    justify-content: flex-start;
  }

  .site-footer__col {
    flex-basis: 100%;
  }

  .site-footer__heading {
    margin-bottom: 1.1rem;
  }

  .site-footer__social a {
    width: 46px;
    height: 46px;
  }

  .site-footer__hours li {
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 0 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__social a,
  .site-footer__links a,
  .site-footer__top-btn,
  .site-footer__top-btn span {
    transition: none;
  }

  .site-footer__social a:hover,
  .site-footer__top-btn:hover span {
    transform: none;
  }
}

/* ==========================================================================
   Auth pages — sign in / register / forgot / reset password
   ========================================================================== */

.auth-section {
  padding: 4.5rem 0;
  background: var(--color-bg-alt);
  min-height: 62vh;
  display: flex;
  align-items: center;
}

.auth-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -35px rgba(31, 26, 23, 0.4);
  padding: 2.5rem 2.25rem;
}

.auth-card__title {
  font-size: 1.6rem;
  text-align: center;
  margin: 0 0 0.4rem;
}

.auth-card__subtitle {
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  text-align: center;
  margin: 0 0 1.85rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.field__label {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--color-ink);
}

.field__forgot-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-maroon);
  white-space: nowrap;
}

.field__forgot-link:hover,
.field__forgot-link:focus-visible {
  text-decoration: underline;
}

.field__input {
  width: 100%;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.field__input:focus {
  outline: 0;
  border-color: var(--color-maroon);
  background: #fff;
  box-shadow: 0 0 0 3px var(--color-maroon-tint);
}

.field__hint {
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  margin: 0;
}

.auth-form__submit {
  width: 100%;
  margin-top: 0.3rem;
  background: var(--color-maroon);
  color: #fff;
  border: 1px solid var(--color-maroon);
  padding: 0.85rem;
  border-radius: var(--radius-md);
  font-size: 1rem;
  text-align: center;
}

.auth-form__submit:hover,
.auth-form__submit:focus-visible {
  background: var(--color-maroon-dark);
  border-color: var(--color-maroon-dark);
  color: #fff;
}

.auth-card__alt {
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.auth-card__alt a {
  color: var(--color-maroon);
  font-weight: 650;
}

.auth-card__alt a:hover,
.auth-card__alt a:focus-visible {
  text-decoration: underline;
}

.form-error {
  background: var(--color-maroon-tint);
  border-left: 4px solid var(--color-maroon);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.85rem 1rem;
  margin-bottom: 1.6rem;
  font-size: 0.88rem;
  color: var(--color-maroon-dark);
}

.form-error p {
  margin: 0 0 0.3rem;
}

.form-error p:last-child {
  margin-bottom: 0;
}

.form-success {
  background: #eaf3e8;
  border-left: 4px solid var(--color-green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.9rem 1rem;
  margin-bottom: 1.6rem;
  font-size: 0.9rem;
  color: var(--color-green-dark);
}

.form-success p {
  margin: 0;
}

/* ==========================================================================
   Account & order history
   ========================================================================== */

.account {
  padding: 3.5rem 0 5rem;
}

.account__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.85rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-line);
}

.account__eyebrow {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 0.5rem;
}

.account__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 0.4rem;
}

.account__subtitle {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  margin: 0;
}

/* Quiet utility action — deliberately not a .btn-default pill, so it
   doesn't compete with the primary CTAs used everywhere else on the
   site. */
.account__signout {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-ink);
  background: var(--color-card-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.account__signout svg {
  transition: transform var(--transition-fast);
}

.account__signout:hover,
.account__signout:focus-visible {
  color: var(--color-maroon);
  border-color: var(--color-maroon);
  background: var(--color-maroon-tint);
}

.account__signout:hover svg,
.account__signout:focus-visible svg {
  transform: translateX(2px);
}

.account__section-header {
  margin-bottom: 1.5rem;
}

.account__heading {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 620;
  margin: 0 0 0.3rem;
}

.account__section-sub {
  color: var(--color-ink-soft);
  font-size: 0.88rem;
  margin: 0;
}

/* Empty state */

.account__empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-lg);
}

.account__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--color-card-bg);
  color: var(--color-green);
  box-shadow: 0 0 0 1px var(--color-line);
}

.account__empty-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 620;
  margin: 0 0 0.4rem;
}

.account__empty-text {
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  max-width: 36ch;
  margin: 0 auto 1.75rem;
}

/* Order list — same "whole row is a link" pattern as the featured
   product cards on the home page, so the click target is generous. */

.order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.order-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.15rem 1.4rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.order-list__link:hover,
.order-list__link:focus-visible {
  border-color: var(--color-maroon);
  box-shadow: 0 18px 32px -24px rgba(31, 26, 23, 0.4);
  transform: translateY(-2px);
}

.order-list__link:hover .order-list__chevron,
.order-list__link:focus-visible .order-list__chevron {
  transform: translateX(3px);
  color: var(--color-maroon);
}

.order-list__main {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 160px;
}

.order-list__id {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.02rem;
  color: var(--color-ink);
}

.order-list__meta {
  font-size: 0.82rem;
  color: var(--color-ink-soft);
}

.order-list__side {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
}

.order-list__total {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.02rem;
  min-width: 68px;
  text-align: right;
}

.order-list__chevron {
  display: inline-flex;
  color: var(--color-ink-soft);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

/* Status ribbon. A flag/tag shape (clip-path notch on the right) rather
   than a plain pill, so it reads as a status marker at a glance —
   tone comes from the order's mapped status, not its literal DB value,
   so an unrecognised status still renders instead of breaking. */

.order-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 1.35rem 0.42rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  box-shadow: 0 8px 16px -10px rgba(31, 26, 23, 0.45);
}

.order-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.order-status--success {
  background: linear-gradient(155deg, var(--color-green), var(--color-green-dark));
  color: #fff;
}

.order-status--pending {
  background: linear-gradient(155deg, var(--color-yellow), #c88f22);
  color: var(--color-ink);
}

.order-status--danger {
  background: linear-gradient(155deg, var(--color-danger), var(--color-danger-dark));
  color: #fff;
}

.order-status--neutral {
  background: linear-gradient(155deg, #9c948a, var(--color-ink-soft));
  color: #fff;
}

@media (max-width: 575.98px) {
  .account {
    padding: 2.5rem 0 3.5rem;
  }

  .account__header {
    align-items: flex-start;
  }

  .order-list__link {
    padding: 1rem;
  }

  .order-list__side {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .order-list__chevron {
    display: none;
  }
}

/* Order detail page. Mirrors the cart-offcanvas's own visual language
   (.cart-item, .cart-summary) rather than inventing a second one, so an
   order looks like the natural next screen after the cart it came from. */

.order-detail {
  padding: 3.25rem 0 5rem;
}

.order-detail__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 0.6rem;
}

.order-detail__lead {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  margin: 0 0 2rem;
}

.order-detail__lead a {
  color: var(--color-maroon);
  font-weight: 600;
}

.order-detail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.order-detail__meta .order-detail__lead {
  margin: 0;
}

/* Success banner, right after checkout */

.order-success {
  padding: 2rem 2rem 1.85rem;
  margin-bottom: 0.5rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-green);
  border-radius: var(--radius-lg);
}

.order-success .order-status {
  margin-bottom: 1rem;
}

.order-success .order-detail__title {
  margin-bottom: 0.5rem;
}

.order-success .order-detail__lead {
  margin-bottom: 0;
  max-width: 52ch;
}

.order-success + .order-detail__grid {
  margin-top: 2.25rem;
}

/* Two-column layout: items + totals on the left, delivery details on
   the right. Address rail is deliberately narrower and sits in a card
   of its own, so it doesn't read as more line items. */

.order-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 2.5rem;
  align-items: start;
}

.order-detail__heading {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0 0 1rem;
}

.order-detail__items,
.order-detail__address {
  background: var(--color-card-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
}

.order-items {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.order-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-line);
}

.order-item:first-child {
  padding-top: 0;
}

.order-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.order-item__image {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-bg-alt);
}

/* An item without a saved image still lines up on the same grid — a
   plain background tile instead of the layout jumping when the image
   is missing. */
.order-item:not(:has(.order-item__image)) .order-item__info {
  padding-left: calc(56px + 0.9rem);
  position: relative;
}

.order-item:not(:has(.order-item__image)) .order-item__info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}

.order-item__info {
  flex: 1;
  min-width: 0;
}

.order-item__name {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 0.2rem;
}

.order-item__meta {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin: 0;
}

.order-item__total {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.95rem;
  white-space: nowrap;
}

.checkout-totals {
  border-top: 1px solid var(--color-line);
  padding-top: 1.1rem;
}

.checkout-totals__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  margin-bottom: 0.5rem;
}

.checkout-totals__row--total {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.15rem;
  margin-bottom: 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--color-line);
}

/* Delivery / address rail */

.order-address {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0 0 1.1rem;
}

.order-address__contact {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin: 0 0 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--color-line);
}

.order-detail__address .order-detail__heading:not(:first-child) {
  margin-top: 0;
}

.order-address__notes {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin: 0 0 1.4rem;
}

.order-detail__back {
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-line);
}

.order-detail__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-maroon);
}

.order-detail__back a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  .order-detail__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .order-detail {
    padding: 2.25rem 0 3.5rem;
  }

  .order-success {
    padding: 1.5rem 1.35rem;
  }

  .order-detail__items,
  .order-detail__address {
    padding: 1.25rem 1.15rem;
  }

  .order-detail__meta {
    gap: 0.6rem;
  }
}

/* ==========================================================================
   Small-screen baseline
   Consistent side margins, no sideways scroll, and section spacing that
   scales down instead of staying at desktop size.
   ========================================================================== */

body {
  overflow-x: clip;
}

img {
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .hero {
    padding: 3rem 0 2.75rem;
  }

  .how-it-works {
    padding: 3.5rem 0;
  }

  .why-us,
  .testimonials {
    padding: 3rem 0;
  }

  .section-header {
    margin-bottom: 2rem;
  }
}

@media (max-width: 575.98px) {
  .container {
    padding-inline: 1rem;
  }

  .hero__actions {
    gap: 0.75rem;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .app-content.is-transitioning,
  .app-content.is-visible,
  .nav-progress,
  .primary-nav__link::after,
  .site-header,
  .site-header__inner,
  .account__signout svg,
  .order-list__link,
  .order-list__chevron {
    transition: none;
  }
}