/** Shopify CDN: Minification failed

Line 324:0 Unexpected "{"
Line 324:1 Unexpected "{"
Line 324:3 Expected identifier but found "'yabai-home.css'"
Line 326:0 Unexpected "{"
Line 326:1 Expected identifier but found "%"
Line 328:0 Unexpected "{"
Line 328:1 Expected identifier but found "%"
Line 329:22 Unexpected "{"
Line 329:31 Expected ":"
Line 329:38 Unexpected "{"
... and 98 more hidden warnings

**/
/* =========================================================
   YABAI HOME — SHARED DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.yabai-home-section {
  --yabai-black: #0d0c0a;
  --yabai-warm-black: #11100d;
  --yabai-gold: #c39a50;
  --yabai-cream: #f1e5d0;
  --yabai-muted: #c9baa4;
  --yabai-border: rgba(195, 154, 80, 0.24);

  width: 100%;
  max-width: 100%;

  background: var(--yabai-warm-black);
  color: var(--yabai-cream);
}

.yabai-home-section *,
.yabai-home-section *::before,
.yabai-home-section *::after {
  box-sizing: border-box;
}

.yabai-home-section img,
.yabai-home-section svg,
.yabai-home-section video {
  max-width: 100%;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.yabai-eyebrow {
  margin: 0 0 14px;

  color: var(--yabai-gold);

  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;

  text-transform: uppercase;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.yabai-heading {
  margin: 0;

  color: var(--yabai-cream);

  font-family:
    var(--font-heading-family, Georgia, serif);

  font-weight: 400;

  line-height: 0.98;
}


/* =========================================================
   BODY COPY
   ========================================================= */

.yabai-body {
  color: var(--yabai-muted);

  font-size: 14px;

  line-height: 1.7;
}

.yabai-body > :first-child {
  margin-top: 0;
}

.yabai-body > :last-child {
  margin-bottom: 0;
}


/* =========================================================
   TEXT LINKS
   ========================================================= */

.yabai-link {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--yabai-gold);

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;

  text-decoration: none;
  text-transform: uppercase;
}

.yabai-link::after {
  content: "→";

  transition:
    transform 180ms ease;
}

.yabai-link:hover::after {
  transform:
    translateX(4px);
}


/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.yabai-outline-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 22px;

  padding:
    15px 21px;

  border:
    1px solid rgba(195, 154, 80, 0.55);

  background:
    transparent;

  color:
    var(--yabai-cream);

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;

  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    background 180ms ease,
    border-color 180ms ease;
}

.yabai-outline-button:hover {
  border-color:
    var(--yabai-gold);

  background:
    rgba(195, 154, 80, 0.08);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  /* -----------------------------------------
     SECTION SAFETY
     ----------------------------------------- */

  .yabai-home-section {
    width: 100%;
    max-width: 100vw;

    overflow-x: hidden;
  }

  .yabai-home-section img,
  .yabai-home-section svg,
  .yabai-home-section video {
    max-width: 100%;
  }


  /* -----------------------------------------
     EYEBROW
     ----------------------------------------- */

  .yabai-eyebrow {
    margin-bottom: 12px;

    font-size: 9px;

    letter-spacing: 0.18em;
  }


  /* -----------------------------------------
     SHARED HEADINGS
     Prevent long headings from forcing
     sections beyond the viewport.
     ----------------------------------------- */

  .yabai-heading {
    max-width: 100%;

    overflow-wrap: break-word;

    line-height: 1;
  }


  /* -----------------------------------------
     BODY COPY
     ----------------------------------------- */

  .yabai-body {
    max-width: 100%;

    font-size: 13px;

    line-height: 1.65;
  }


  /* -----------------------------------------
     LINKS
     ----------------------------------------- */

  .yabai-link {
    max-width: 100%;

    gap: 10px;

    font-size: 9px;

    letter-spacing: 0.14em;
  }


  /* -----------------------------------------
     OUTLINE BUTTONS
     ----------------------------------------- */

  .yabai-outline-button {
    max-width: 100%;

    gap: 16px;

    padding:
      14px 18px;

    font-size: 9px;

    letter-spacing: 0.14em;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 380px) {

  .yabai-eyebrow {
    font-size: 8px;
  }

  .yabai-body {
    font-size: 12.5px;
  }

  .yabai-outline-button {
    padding:
      13px 16px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .yabai-link::after,
  .yabai-outline-button {
    transition: none;
  }

}

{{ 'yabai-home.css' | asset_url | stylesheet_tag }}

{% assign product = section.settings.product %}

{% style %}
  #YabaiDiscoverySet-{{ section.id }} {
    background: #0d0c0a;;
    border-top: 1px solid rgba(195, 154, 80, 0.18);
    border-bottom: 1px solid rgba(195, 154, 80, 0.18);
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 88px 24px 92px;
    text-align: center;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__eyebrow {
    margin: 0 0 14px;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__title {
    margin: 0;
    color: #f1e5d0;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__subtitle {
    margin: 18px auto 0;
    max-width: 520px;
    color: #c39a50;
    font-size: 20px;
    line-height: 1.5;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__product {
    margin-top: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__image-link {
    display: block;
    width: 100%;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__image-wrap {
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(195, 154, 80, 0.16);
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__image {
    display: block;
    width: 100%;
    height: auto;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__price {
    margin: 26px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__compare-price {
    color: rgba(241, 229, 208, 0.5);
    text-decoration: line-through;
    font-size: 20px;
    line-height: 1.2;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__sale-price {
    color: #f1e5d0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__form {
    margin-top: 28px;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__button {
    appearance: none;
    border: 1px solid #c39a50;
    background: #c39a50;
    color: #111111;
    min-width: 220px;
    padding: 16px 28px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__button:hover {
    background: transparent;
    color: #f1e5d0;
    border-color: #c39a50;
  }

  #YabaiDiscoverySet-{{ section.id }} .discovery-set__button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  @media screen and (max-width: 749px) {
    #YabaiDiscoverySet-{{ section.id }} .discovery-set__inner {
      padding: 64px 20px 68px;
    }

    #YabaiDiscoverySet-{{ section.id }} .discovery-set__title {
      font-size: clamp(34px, 10vw, 48px);
      line-height: 0.98;
    }

    #YabaiDiscoverySet-{{ section.id }} .discovery-set__subtitle {
      margin-top: 14px;
      font-size: 18px;
    }

    #YabaiDiscoverySet-{{ section.id }} .discovery-set__image-wrap {
      width: 100%;
      padding: 12px;
    }

    #YabaiDiscoverySet-{{ section.id }} .discovery-set__sale-price,
    #YabaiDiscoverySet-{{ section.id }} .discovery-set__compare-price {
      font-size: 18px;
    }

    #YabaiDiscoverySet-{{ section.id }} .discovery-set__button {
      width: 100%;
      max-width: 260px;
      padding: 15px 22px;
    }
  }
{% endstyle %}

<section id="YabaiDiscoverySet-{{ section.id }}" class="yabai-home-section discovery-set">
  <div class="discovery-set__inner">
    {% if product != blank %}
      <p class="yabai-eyebrow discovery-set__eyebrow">
        DISCOVERY SET
      </p>

      <h2 class="yabai-heading discovery-set__title">
        {{ product.title }}
      </h2>
    {% endif %}

    {% if section.settings.subheading != blank %}
      <p class="discovery-set__subtitle">
        {{ section.settings.subheading }}
      </p>
    {% endif %}

    {% if product != blank %}
      <div class="discovery-set__product">
        <a href="{{ product.url }}" class="discovery-set__image-link">
          <div class="discovery-set__image-wrap">
            {{
              product.featured_image
              | image_url: width: 1600
              | image_tag:
                class: 'discovery-set__image',
                loading: 'lazy',
                alt: product.title
            }}
          </div>
        </a>

        <div class="discovery-set__price">
          {% if product.compare_at_price > product.price %}
            <span class="discovery-set__compare-price">
              {{ product.compare_at_price | money }}
            </span>
          {% endif %}

          <span class="discovery-set__sale-price">
            Total: {{ product.price | money }}
          </span>
        </div>

        {% form 'product', product, class: 'discovery-set__form' %}
          <input
            type="hidden"
            name="id"
            value="{{ product.selected_or_first_available_variant.id }}"
          >
          <input type="hidden" name="sections" value="cart-drawer">

          <button
            type="submit"
            class="discovery-set__button"
            {% unless product.available %}disabled{% endunless %}
          >
            {% if product.available %}
              Add to Cart
            {% else %}
              Sold Out
            {% endif %}
          </button>
        {% endform %}
      </div>
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "Discovery Product",
  "settings": [
    {
      "type": "text",
      "id": "subheading",
      "label": "Sub Heading",
      "default": "All three bars. One box."
    },
    {
      "type": "product",
      "id": "product",
      "label": "Select Product"
    }
  ],
  "presets": [
    {
      "name": "Discovery Product"
    }
  ]
}
{% endschema %}

/* =========================================
   COLLECTION INTRO — YABAI DARK
   ========================================= */

.cstm-richtext {
  background: #0d0c0a !important;
  color: #f1e5d0 !important;
}

.cstm-richtext h1,
.cstm-richtext h2,
.cstm-richtext h3,
.cstm-richtext h4,
.cstm-richtext p,
.cstm-richtext .rte {
  color: #f1e5d0 !important;
}

.cstm-richtext a {
  color: #c39a50 !important;
}

{% style %}
.cstm-richtext {
  background: #0d0c0a !important;
  color: #f1e5d0 !important;
}
{% endstyle %}