/** Shopify CDN: Minification failed

Line 284:0 Unexpected "<"
Line 288:9 Expected identifier but found "%"
Line 289:10 Unexpected "{"
Line 289:11 Unexpected "{"
Line 290:19 Expected ":"
Line 294:8 Unexpected "{"
Line 294:9 Expected identifier but found "%"
Line 295:10 Unexpected "<"
Line 295:30 Unexpected "{"
Line 295:39 Expected ":"
... and 42 more hidden warnings

**/
/* Krunchy Melts homepage styles. Load once from layout/theme.liquid. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&display=swap');

:root {
  --km-orange: #FF7A1A;
  --km-orange-text: #B86000;
  --km-blue: #BEE0F5;
  --km-blue-light: #E3F2FC;
  --km-blue-tile: #DCEEFA;
  --km-blue-deep: #6FB1E6;
  --km-yellow: #FFC93C;
  --km-yellow-light: #FFE49A;
  --km-pink: #FF9EBB;
  --km-pink-light: #FFD0DE;
  --km-cream: #FFF8EC;
  --km-sand: #FFEBC9;
  --km-latte: #F6D9B0;
  --km-latte-deep: #E8BE8A;
  --km-brown: #3B2416;
  --km-brown-soft: #5A3A2A;
  --km-espresso: #2E1B12;
  --km-line: #F0DDBF;
  --km-font-display: 'Fraunces', Georgia, serif;
  --km-font-body: 'DM Sans', system-ui, sans-serif;

  /* Makes the theme's own header, footer and text use the same fonts (Dawn variables). */
  --font-body-family: 'DM Sans', system-ui, sans-serif;
  --font-heading-family: 'Fraunces', Georgia, serif;
}

/* ---------- Base ---------- */
.km {
  font-family: var(--km-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--km-brown);
  background: var(--km-cream);
}
.km *, .km *::before, .km *::after { box-sizing: border-box; }
.km h1, .km h2, .km h3, .km p { margin: 0; }
.km a { text-decoration: none; }
.km img { max-width: 100%; height: auto; display: block; }

.km-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.km-sec { padding: 96px 0; }
.km-row { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.km-stack { display: flex; flex-direction: column; gap: 48px; }

.km-eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--km-orange-text);
}
.km-h1 {
  font-family: var(--km-font-display); font-weight: 600; font-size: 60px;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--km-brown);
}
.km-h2 {
  font-family: var(--km-font-display); font-weight: 600; font-size: 44px;
  line-height: 1.1; letter-spacing: -0.015em; color: var(--km-brown);
}
.km-h1 em, .km-h2 em {
  font-style: italic; font-weight: 500; box-shadow: inset 0 -0.32em 0 var(--km-yellow);
}
.km-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.km-sub { color: var(--km-brown-soft); max-width: 560px; }
.km-center { display: flex; justify-content: center; }

/* ---------- Buttons ---------- */
.km-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; border-radius: 999px;
  background: var(--km-orange); color: var(--km-brown);
  font-family: var(--km-font-body); font-weight: 700; font-size: 16px;
  border: 2px solid transparent; cursor: pointer; transition: filter 0.15s;
}
.km-btn:hover { filter: brightness(0.94); color: var(--km-brown); }
.km-btn--outline { background: transparent; border-color: var(--km-brown); }
.km-btn--outlined { border-color: var(--km-brown); }
.km-btn--dark { background: var(--km-brown); color: var(--km-cream); }
.km-btn--dark:hover { color: var(--km-cream); }
.km-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.km-link { color: var(--km-orange-text); font-weight: 700; }
.km-link:hover { color: var(--km-brown); }

/* Placeholder shown until a photo is uploaded */
.km-ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 100%; padding: 32px; font-size: 15px; font-weight: 500; color: var(--km-brown);
}

/* ---------- Hero ---------- */
.km-hero .km-wrap { padding-top: 56px; padding-bottom: 80px; }
.km-hero__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.km-hero__text { font-size: 19px; color: var(--km-brown-soft); max-width: 520px; }
.km-hero__note { font-size: 14px; color: var(--km-brown-soft); }
.km-hero__art { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.km-hero__frame { position: relative; width: 100%; max-width: 440px; }
.km-hero__arch {
  width: 100%; height: 540px; overflow: hidden; background: var(--km-orange);
  border-radius: 999px 999px 36px 36px;
}
.km-hero__arch img { width: 100%; height: 100%; object-fit: cover; }
.km-sticker {
  position: absolute; left: -24px; bottom: 48px; width: 128px; height: 128px; padding: 16px;
  border-radius: 999px; background: var(--km-pink); color: var(--km-brown); transform: rotate(-10deg);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--km-font-display); font-style: italic; font-weight: 600; font-size: 20px; line-height: 1.15;
}
.km-dot { position: absolute; border-radius: 999px; }
.km-dot--blue { right: -16px; top: 72px; width: 84px; height: 84px; background: var(--km-blue); }
.km-dot--yellow { right: 36px; top: 24px; width: 40px; height: 40px; background: var(--km-yellow); }

/* ---------- Trust strip ---------- */
.km-trust { background: var(--km-orange); padding: 22px 0; }
.km-trust__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 36px; margin: 0; padding: 0; list-style: none;
  font-size: 15px; font-weight: 700; color: var(--km-brown);
}
.km-trust__list li + li::before { content: '\25CF'; color: var(--km-cream); margin-right: 36px; }

/* ---------- Packs ---------- */
.km-packs { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.km-pack {
  flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px;
  background: #FFFFFF; border: 1.5px solid var(--km-line); border-radius: 32px; padding: 32px;
}
.km-pack__top {
  height: 150px; border-radius: 22px; padding-top: 28px;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
}
.km-pack__num { font-family: var(--km-font-display); font-weight: 600; font-size: 88px; line-height: 1; }
.km-pack__word { font-family: var(--km-font-display); font-style: italic; font-size: 26px; }
.km-pack__price { font-family: var(--km-font-display); font-weight: 600; font-size: 34px; line-height: 1; }
.km-pack__text { color: var(--km-brown-soft); flex: 1 1 auto; }
.km-pack .km-btn { align-self: flex-start; }

/* ---------- Flavors ---------- */
.km-flavors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.km-flavor {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  background: #FFFFFF; border-radius: 28px; padding: 16px 16px 20px;
}
.km-flavor[hidden] { display: none; }
.km-flavor__art {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden;
}
.km .km-flavor__art img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain;
}
.km-swatch {
  width: 104px; height: 96px; border-radius: 52px 52px 40px 40px / 62px 62px 34px 34px;
  box-shadow: inset -10px -8px 0 rgba(59, 36, 22, 0.10);
}
.km-flavor__name { font-family: var(--km-font-display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--km-brown); overflow-wrap: anywhere; }
.km-flavor__name:hover { color: var(--km-orange-text); }
.km-flavor__link { font-size: 15px; }

/* ---------- Mini espresso ---------- */
.km-mini__art { flex: 1 1 380px; min-width: 0; height: 460px; border-radius: 32px; overflow: hidden; background: var(--km-latte-deep); }
.km-mini__art img { width: 100%; height: 100%; object-fit: cover; }
.km-mini__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.km-mini__h { font-size: 48px; line-height: 1.08; }
.km-mini__sub { font-family: var(--km-font-display); font-style: italic; font-size: 24px; color: var(--km-orange-text); }
.km-mini__text { color: var(--km-brown-soft); }

/* ---------- Story ---------- */
.km-story__intro { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; max-width: 720px; margin: 0 auto; }
.km-story__text { color: var(--km-brown-soft); }
.km-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.km-card { flex: 1 1 260px; min-width: 0; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.km-card__title { font-family: var(--km-font-display); font-weight: 600; font-size: 26px; }
.km-card__text { color: var(--km-brown-soft); }

/* ---------- Shops ---------- */
.km-shops { padding: 0 0 96px; }
.km-shops__box { border-radius: 40px; padding: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.km-shops__copy { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.km-shops__h { font-size: 40px; }
.km-shops__art { flex: 1 1 320px; min-width: 0; height: 320px; border-radius: 28px; overflow: hidden; background: var(--km-blue-light); }
.km-shops__art img { width: 100%; height: 100%; object-fit: cover; }
.km-shops__contact { color: var(--km-brown); font-weight: 700; text-decoration: underline !important; }

/* ---------- Reviews ---------- */
.km-reviews { display: flex; flex-wrap: wrap; gap: 24px; }
.km-review { flex: 1 1 300px; min-width: 0; background: #FFFFFF; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.km-review__mark { font-family: var(--km-font-display); font-size: 56px; line-height: 0.6; color: var(--km-orange); }
.km-review__quote { font-family: var(--km-font-display); font-size: 22px; line-height: 1.35; }
.km-review__name { font-weight: 700; font-size: 15px; color: var(--km-brown-soft); }

/* ---------- Newsletter ---------- */
.km-news { background: var(--km-orange); padding: 80px 0; }
.km-news__inner { max-width: 720px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.km-news__form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: flex-end; width: 100%; }
.km-news__field { flex: 1 1 280px; max-width: 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.km-news__field label { font-size: 14px; font-weight: 700; }
.km-news__field input {
  height: 52px; width: 100%; border: 0; border-radius: 999px; padding: 0 22px;
  font-family: var(--km-font-body); font-size: 16px; color: var(--km-brown); background: #FFFFFF;
}
.km-news__msg { font-weight: 700; width: 100%; }

/* ---------- Tablets ---------- */
@media (max-width: 989px) {
  .km-flavors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Small screens ---------- */
@media (max-width: 749px) {
  .km-flavors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .km-flavor { padding: 12px 12px 16px; border-radius: 22px; }
  .km-flavor__name { font-size: 17px; }
  .km-wrap { padding: 0 20px; }
  .km-sec { padding: 64px 0; }
  .km-h1 { font-size: 40px; }
  .km-h2 { font-size: 32px; }
  .km-mini__h { font-size: 36px; }
  .km-shops__h { font-size: 30px; }
  .km-hero .km-wrap { padding-top: 32px; padding-bottom: 56px; }
  .km-hero__arch { height: 420px; }
  .km-sticker { left: -8px; }
  .km-trust__list li + li::before { margin-right: 18px; }
  .km-trust__list { gap: 8px 18px; }
  .km-shops { padding-bottom: 64px; }
  .km-shops__box { padding: 32px 24px; }
  .km-mini__art { height: 320px; }
  .km-news__inner { padding: 0 20px; }
}

/* ---------- Info-only products: no prices on cards, spacing for the Add to pack button ---------- */
.card-wrapper .price,
.card-wrapper .quick-add { display: none !important; }
.km-pack-cta { margin: 1.5rem 0; }
/* ---------- Our story page: calm header with photo strip, badge chips ---------- */
.km-sh .km-wrap { padding-top: 64px; padding-bottom: 72px; }
.km-sh__intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 760px; margin: 0 auto 48px; }
.km-sh__title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.08; letter-spacing: -0.01em; margin: 0; color: var(--km-brown); }
.km-sh__title em { font-style: italic; font-weight: 500; box-shadow: inset 0 -0.32em 0 var(--km-yellow); }
.km-sh__text { font-size: 19px; color: var(--km-brown-soft); margin: 0; max-width: 600px; }
.km-sh__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.km-sh__photos:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.km-sh__photo { margin: 0; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; background: var(--km-sand); }
.km-sh__photo:nth-child(even) { margin-top: 28px; }
.km-sh__photo img, .km-sh__photo .km-ph { width: 100%; height: 100%; object-fit: cover; display: flex; }
.km-bd__intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; max-width: 680px; margin: 0 auto 32px; }
.km-bd__text { color: var(--km-brown-soft); margin: 0; }
.km-bd__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.km-bd__chip { display: flex; flex-direction: column; align-items: center; background: var(--km-sand); border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: 16px; color: var(--km-brown); line-height: 1.2; }
.km-bd__chip--hi { background: var(--km-orange); }
.km-bd__note { font-weight: 500; font-size: 12px; opacity: .85; margin-top: 2px; }
@media (max-width: 749px) {
  .km-sh .km-wrap { padding-top: 40px; padding-bottom: 48px; }
  .km-sh__photos, .km-sh__photos:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; gap: 12px; }
  .km-sh__photos > :nth-child(3) { grid-column: 1 / -1; aspect-ratio: 4 / 3; margin-top: 0; }
  .km-sh__photo:nth-child(even) { margin-top: 16px; }
}

/* Five quality cards sit in one row on desktop */
@media (min-width: 990px) {
  .km-cards:has(> :nth-child(5):last-child) { flex-wrap: nowrap; gap: 16px; }
  .km-cards:has(> :nth-child(5):last-child) .km-card { flex: 1 1 0; padding: 24px 20px; }
  .km-cards:has(> :nth-child(5):last-child) .km-card__title { font-size: 22px; }
}

/* Photo placeholder on the story page */
.km-ti__img { background: var(--km-cream); }
<section class="km km-sec" style="background: {{ section.settings.bg_color }};">
  <div class="km-wrap km-row km-ti{% if section.settings.image_position == 'right' %} km-ti--right{% endif %}">
    <div class="km-ti__art km-ti__art--{{ section.settings.photo_shape }}">
      <div class="km-ti__img">
        {%- if section.settings.image != blank -%}
          {{
            section.settings.image
            | image_url: width: 1000
            | image_tag: loading: 'lazy', widths: '500, 1000', sizes: '(min-width: 990px) 520px, 90vw', alt: section.settings.image.alt
          }}
        {%- else -%}
          <div class="km-ph">{{ section.settings.placeholder_text }}</div>
        {%- endif -%}
      </div>
      {%- if section.settings.sticker != blank -%}
        <div class="km-sticker">{{ section.settings.sticker }}</div>
      {%- endif -%}
    </div>

    <div class="km-ti__copy">
      {%- if section.settings.eyebrow != blank -%}
        <p class="km-eyebrow">{{ section.settings.eyebrow }}</p>
      {%- endif -%}
      <h2 class="km-h2">
        {{ section.settings.heading }}
        {%- if section.settings.heading_highlight != blank %} <em>{{ section.settings.heading_highlight }}</em>{% endif %}
      </h2>
      <div class="km-ti__text">{{ section.settings.text }}</div>
      {%- if section.settings.button_label != blank -%}
        <a class="km-btn" href="{{ section.settings.button_link | default: '#' }}">{{ section.settings.button_label }}</a>
      {%- endif -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "KM Text + photo",
  "tag": "div",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Small label", "default": "The beginning" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "One very" },
    { "type": "text", "id": "heading_highlight", "label": "Heading: highlighted part (italic, yellow underline)", "default": "unique idea." },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Tell this part of the story here.</p>" },
    { "type": "image_picker", "id": "image", "label": "Photo" },
    { "type": "text", "id": "placeholder_text", "label": "Placeholder text (shown until a photo is added)", "default": "[Photo]" },
    {
      "type": "select",
      "id": "image_position",
      "label": "Photo position",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "photo_shape",
      "label": "Photo shape",
      "options": [
        { "value": "wide", "label": "Wide (4:3)" },
        { "value": "square", "label": "Square" },
        { "value": "tall", "label": "Tall (4:5)" }
      ],
      "default": "wide"
    },
    { "type": "text", "id": "sticker", "label": "Round sticker text (leave empty to hide)" },
    { "type": "text", "id": "button_label", "label": "Button label (leave empty to hide)" },
    { "type": "url", "id": "button_link", "label": "Button link" },
    { "type": "color", "id": "bg_color", "label": "Background", "default": "#FFF8EC" }
  ],
  "presets": [{ "name": "KM Text + photo" }]
}
{% endschema %}