/* Style changes GK approved after the Shopify export. Loaded after the theme's own CSS. */

/* 12 Oct 2026, "shouldn't see horizontal bar": the UNESCO slideshow (ai_gen_block_6b2843e) is
   100vw wide, which includes the scrollbar on Windows, so the page scrolled sideways.
   clip (not hidden) keeps the sticky header working. */
html,
body {
  overflow-x: clip;
}

/* 12 Oct 2026: the "Subscribe and save" banner was removed (no subscriptions); GK kept its
   coffee-cup image as the footer background. The footer section has no image setting. */
#shopify-section-sections--kama__footer_4iyhwC .section-background {
  /* cream wash keeps the footer text readable over the cup and chocolate; WebP copy made by render.mjs (525 KB PNG) */
  background:
    linear-gradient(rgb(242 229 204 / 0.55), rgb(242 229 204 / 0.55)),
    url('/images/webp/Gemini_Generated_Image_6qzui06qzui06qzu.webp') center / cover no-repeat;
}

/* In-page anchors (e.g. footer "Wholesale" → /collections/all#wholesale) land below the sticky header. */
.gk-anchor {
  display: block;
  scroll-margin-top: 100px;
}

/* ---- Font system (12 Oct 2026, GK's font audit) ----
   Reference: "Grown in a UNESCO biodiversity hotspot", Cormorant Bold. Every heading matches it;
   menu and buttons use Cormorant SemiBold (Regular is too thin at 16-20px); paragraphs stay Lato.
   !important is needed because theme text blocks set their font per block, inline. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-accent--family), serif !important;
  font-weight: 700 !important;
}
:is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
  font-weight: inherit; /* "Responsibly Sourced" was the only band heading wrapped in bold */
}
.button,
.button-secondary,
button.button,
.email-signup__button,
.menu-list__link,
.menu-list__link-title,
summary.menu__heading,
.accordion summary,
details > summary {
  font-family: var(--font-accent--family), serif !important;
  font-weight: 600 !important;
}

/* The wholesale section (a Shopify AI-generated block) hard-codes Arial on its accordion questions and
   its Send button; bring both into the system, and make Send look like the theme's other buttons. */
[class*='ai-wholesale-accordion-button-'] {
  font-family: var(--font-accent--family), serif !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
}
[class*='ai-wholesale-form-submit-'] {
  font-family: var(--font-accent--family), serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: var(--color-primary-button-text) !important;
  background: var(--color-primary-button-background) !important;
  border: 0 !important;
  border-radius: 50px !important;
}
[class*='ai-wholesale-form-submit-']:hover {
  background: #103f3f !important;
}

/* Footer menu links use the theme's h5 preset, so the heading rule made them bold.
   SemiBold, slightly larger, reads better at footer scale. */
#shopify-section-sections--kama__footer_4iyhwC .menu a {
  font-weight: 600 !important;
  font-size: 1.0625rem;
}

/* 12 Oct 2026: paragraphs justified (GK). Only left-aligned text blocks and product descriptions;
   centred lines (banner subtitles, band captions) stay centred. Hyphenation keeps word gaps even. */
.text-block--align-left p,
.product-details .rte p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* the theme's "balance" wrap shortens lines on purpose; justified, that opened huge word gaps */
  text-wrap: wrap !important;
}

/* About page fade-up as sections scroll in (classes added by gk-edits.js). */
.gk-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.gk-reveal--in {
  opacity: 1;
  transform: none;
}

/* 12 Oct 2026: header menu items 25% further apart (theme: --gap-xl / 2 each side). */
.menu-list__link-title {
  padding-inline: calc(var(--gap-xl) / 2 * 1.25);
}

/* 12 Oct 2026: menu links turn the palette green (#103f3f, the theme's primary button colour) on hover.
   The theme's own hover keeps the same colour, which read as "nothing happened". */
header .menu-list__link:hover,
header .menu-list__link:focus-visible,
header .menu-list__link:hover .menu-list__link-title {
  color: #103f3f !important;
  opacity: 1 !important;
}

/* 12 Oct 2026: green-page banner buttons. The theme's teal and near-black disappeared into the forest
   photo; palette gold (#c5972d) and a cream outline stand out, and both turn palette green on hover. */
#shopify-section-template--kama__hero .button,
#shopify-section-template--kama__hero .button-secondary {
  --button-color: #3e160a;
  --button-background-color: #c5972d;
  --button-border-color: #c5972d;
  color: #3e160a;
  background-color: #c5972d;
  border-color: #c5972d;
}
#shopify-section-template--kama__hero .button-secondary {
  --button-color: #f6eddd;
  --button-background-color: transparent;
  --button-border-color: #f6eddd;
  color: #f6eddd;
  background-color: transparent;
  border: 2px solid #f6eddd;
}
#shopify-section-template--kama__hero .button:hover,
#shopify-section-template--kama__hero .button-secondary:hover {
  --button-color: #f6eddd;
  --button-background-color: #103f3f;
  --button-border-color: #103f3f;
  color: #f6eddd;
  background-color: #103f3f;
  border-color: #103f3f;
}

/* ---- Phone tap targets (12 Oct 2026). Fingers need about 44px; these were 10 to 32px. ---- */
@media (max-width: 749px) {
  /* footer menu links were 22px tall: make each 44px, eating into the list's own 10px gaps so the list grows less */
  #shopify-section-sections--kama__footer_4iyhwC li.menu__item > a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -5px;
  }
}
/* Small links and buttons get a bigger invisible hit area; the visible size and layout stay the same. */
.footer-utilities__text a,
.social-icons__icon-wrapper a,
[class*='ai-slideshow-nav-button-'],
[class*='ai-slideshow-dot-'] {
  position: relative;
}
.footer-utilities__text a::after,
.social-icons__icon-wrapper a::after,
[class*='ai-slideshow-nav-button-']::after,
[class*='ai-slideshow-dot-']::after {
  content: '';
  position: absolute;
  inset: -10px;
}
/* slideshow dots sit 10px apart, so their hit areas stop where the next dot's begins */
[class*='ai-slideshow-dot-']::after {
  inset: -14px -6px;
}
/* these clip their own overflow, so padding (cancelled by a negative margin) enlarges them instead */
button.policy-list-trigger,
button.facets-toggle__button {
  padding-block: 14px;
  margin-block: -14px;
}