/* Site consistency review 03.
   The user requested the homepage's cream background, transparent logo and
   aligned dropdown arrows on every page. Loaded last on all 13 HTML pages.
   Product photography and the established green brand panels are unchanged. */
:root { --page-background: #fff4eb; }
body.site-v3 {
  --cream: var(--page-background);
  --paper: var(--page-background);
  background: var(--page-background);
}
body.site-v3 main,
body.site-v3 .inside-main,
body.site-v3 .legacy-main,
body.site-v3 .page-hero,
body.site-v3 .content-main,
body.site-v3 .collection-section,
body.site-v3 .about-section,
body.site-v3 .cta-outside,
body.site-v3 .figma-footer,
body.site-v3 .landscape-art,
body.site-v3 .figma-product,
body.site-v3 .product-card-info {
  background: var(--page-background);
}
/* The same header geometry and logo treatment on every page. */
body.site-v3 .site-header {
  height: 95px;
  background: var(--page-background);
  border-bottom: 0;
  box-shadow: none;
}
body.site-v3 .site-header .frame-container {
  width: min(1040px, calc(100% - 64px));
}
body.site-v3 .site-header .header-inner { position: relative; }
body.site-v3 .site-header .logo-image {
  width: 81px;
  height: 81px;
  object-fit: contain;
  background: transparent;
}
body.site-v3 .site-header .main-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  width: max-content;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--olive);
  font-size: 12px;
  line-height: 16px;
}
body.site-v3 .site-header .main-nav > a,
body.site-v3 .site-header .main-nav > .nav-item {
  position: relative;
  width: auto;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
}
body.site-v3 .site-header .main-nav > a,
body.site-v3 .site-header .nav-item > a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 32px;
  line-height: 16px;
}
body.site-v3 .site-header .nav-item {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}
/* Draw a real centred chevron rather than using a low-baseline text glyph. */
body.site-v3 .site-header .nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: inherit;
  background: transparent;
  line-height: 1;
}
body.site-v3 .site-header .nav-chevron {
  display: block;
  width: 5px;
  height: 5px;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  transform: translateY(-1.5px) rotate(45deg);
  pointer-events: none;
}
body.site-v3 .site-header .nav-caret[aria-expanded="true"] .nav-chevron {
  transform: translateY(1px) rotate(225deg);
}
body.site-v3 .site-header .nav-caret:hover { background: #d7e3c650; }
body.site-v3 .site-header .main-nav > a[aria-current="page"]::after,
body.site-v3 .site-header .nav-item > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 6px;
  top: auto;
  bottom: 1px;
  width: 19px;
  height: 1px;
  background: var(--olive);
}
body.site-v3 .site-header .nav-submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: -12px;
  min-width: 198px;
  width: max-content;
  margin: 0;
  padding: 8px;
  background: var(--page-background);
  border: 1px solid #d9d6c9;
  border-radius: 7px;
  box-shadow: 0 12px 25px #1b221c26;
}
body.site-v3 .site-header .nav-submenu::before {
  content: "";
  position: absolute;
  height: 10px;
  top: -10px;
  left: 0;
  right: 0;
}
body.site-v3 .site-header .nav-item:hover > .nav-submenu,
body.site-v3 .site-header .nav-item:focus-within > .nav-submenu { display: none; }
body.site-v3 .site-header .nav-item.opened > .nav-submenu { display: block; }
body.site-v3 .site-header .nav-submenu a { padding: 10px; }
body.site-v3 .site-header .header-quote {
  display: inline-flex;
  width: 125px;
  height: 34px;
  margin-left: auto;
  padding: 0;
}
body.site-v3 .site-header .menu-button { display: none; }
@media (max-width: 1000px) and (min-width: 801px) {
  body.site-v3 .site-header .main-nav { gap: 20px; }
}
@media (max-width: 800px) {
  body.site-v3 .site-header { height: 76px; }
  body.site-v3 .site-header .logo-image { width: 61px; height: 61px; }
  body.site-v3 .site-header .header-quote { display: none; }
  body.site-v3 .site-header .menu-button {
    display: block;
    min-height: 40px;
    background: var(--page-background);
  }
  body.site-v3 .site-header .main-nav {
    display: none;
    top: 100%;
    left: -16px;
    right: -16px;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    height: auto;
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
    padding: 12px 16px;
    border: 1px solid #d9d6c9;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 20px #17201522;
    background: var(--page-background);
    font-size: 14px;
    line-height: 20px;
  }
  body.site-v3 .site-header .main-nav.open { display: flex; }
  body.site-v3 .site-header .main-nav > a,
  body.site-v3 .site-header .main-nav > .nav-item {
    width: 100%;
    min-height: 48px;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #dfdfd1;
  }
  body.site-v3 .site-header .main-nav > a,
  body.site-v3 .site-header .nav-item > a {
    min-height: 48px;
    padding: 0 10px;
  }
  body.site-v3 .site-header .nav-item { flex-wrap: wrap; }
  body.site-v3 .site-header .nav-item > a { flex: 1 1 auto; }
  body.site-v3 .site-header .nav-caret {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
  }
  body.site-v3 .site-header .nav-chevron { width: 6px; height: 6px; }
  body.site-v3 .site-header .main-nav > a[aria-current="page"]::after,
  body.site-v3 .site-header .nav-item > a[aria-current="page"]::after { display: none; }
  body.site-v3 .site-header .nav-submenu {
    position: static;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0 0 8px;
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    background: var(--page-background);
  }
  body.site-v3 .site-header .nav-submenu::before { display: none; }
  body.site-v3 .site-header .nav-submenu a { min-height: 44px; padding: 12px 10px; }
}
@media (max-width: 600px) {
  body.site-v3 .site-header .frame-container { width: calc(100% - 32px); }
}

/* Footer artwork correction 04.
   The homepage is the approved visual reference. Previously only .is-home
   received this composition; all other pages inherited a bottom-aligned
   object-fit:cover crop from style.css, cutting off trees at wide viewports.
   Keep these shared rules last so page-specific CSS cannot restore that crop.
   The original 7fcd1.png asset is unchanged. Footer text/links are unchanged. */
body.site-v3 .figma-footer {
  padding-top: 12px;
}
body.site-v3 .figma-footer .landscape-art {
  position: relative;
  width: 100%;
  height: 511px;
  overflow: hidden;
  background: var(--page-background);
}
body.site-v3 .figma-footer .landscape-art > img {
  position: absolute;
  left: -0.02%;
  top: -43.66%;
  width: 100.05%;
  height: 167.26%;
  max-width: none;
  object-fit: fill;
}
@media (max-width: 800px) {
  body.site-v3 .figma-footer .landscape-art {
    height: auto;
    aspect-ratio: 1280 / 511;
  }
}
