/** Shopify CDN: Minification failed

Line 458:0 Unexpected "{"
Line 458:1 Expected identifier but found "%"
Line 460:2 Unexpected "<"
Line 481:9 Unexpected "{"
Line 481:17 Expected ":"
Line 482:6 Unexpected "<"
Line 490:1 Expected identifier but found "%"

**/
/* ==========================================================
   RECIPE CENTRE
   FOUNDATION
========================================================== */

.recipe-centre {
  margin: 60px 0 80px;
}

/* ==========================================================
   THE MALABARI MERCHANT DESIGN VARIABLES
========================================================== */

:root {

  --tmm-section-accent-colour: #c58a3a;
  --tmm-section-accent-width: 60px;
  --tmm-section-accent-height: 3px;
  --tmm-section-accent-spacing: 10px;

}

.recipe-centre__container{
    margin:0 auto;
    width:100%;
}

.recipe-centre__container--standard{
    max-width:1280px;
}

.recipe-centre__container--wide{
    max-width:1440px;
}

.recipe-centre *,
.recipe-centre *::before,
.recipe-centre *::after {
  box-sizing: border-box;
}

/* ----------------------------------------------------------
   Typography
---------------------------------------------------------- */

.recipe-centre h1,
.recipe-centre h2,
.recipe-centre h3 {
  margin: 0;
  line-height: 1.2;
}

.recipe-centre h1 {
  margin-bottom: 20px;
}

.recipe-centre h2 {
  margin-bottom: 0;
}

.recipe-centre p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------
   Links
---------------------------------------------------------- */

.recipe-centre a {
  text-decoration: none;
}

.recipe-centre a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------
   Images
---------------------------------------------------------- */

.recipe-centre img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   Section spacing
---------------------------------------------------------- */

.recipe-centre__hero,
.recipe-centre__summary,
.recipe-centre__content,
.recipe-centre__tips,
.recipe-centre__products,
.recipe-centre__related {
  margin-bottom: 80px;
}

/* ----------------------------------------------------------
   Section Header
---------------------------------------------------------- */

.recipe-centre__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.recipe-centre__section-title {
  margin: 0;
}

.recipe-centre__section-link {
  font-weight: 600;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   Divider
---------------------------------------------------------- */

.recipe-centre__section-divider {
  width: 70px;
  height: 3px;
  background: currentColor;
  opacity: .15;
  margin: 14px 0 30px;
}

/* ==========================================================
   HERO
========================================================== */

.recipe-centre__hero {
  margin: 40px auto 70px;
}

.recipe-centre__hero-image-wrapper {
  overflow: hidden;
  border-radius: 18px;
  margin-bottom: 24px;
}

.recipe-centre__hero-image {
  width: 100%;
  display: block;
}

.recipe-centre__hero-content {
  text-align: left;
  max-width: 100%;
  margin: 0 auto;
}

.recipe-centre__title {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 18px;
}

.recipe-centre__description {
  max-width: 70rem;
  font-size: 1.8rem;
  line-height: 1.7;
  color: rgba(0,0,0,.72);
}

.recipe-centre__description p {
  margin-bottom: 1rem;
}

.recipe-centre__description p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   SUMMARY CARDS
========================================================== */

.recipe-centre__info-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin:56px 0 72px;
}

.recipe-centre__info-card{
    background:#FCFAEB;
    border:1px solid #e8e3dc;
    border-radius:16px;

    padding:28px 22px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    gap:14px;

    transition:.25s ease;
}

.recipe-centre__info-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.recipe-centre__info-icon{
    width:64px;
    height:64px;

    border-radius:50%;
    background:#f6f3ef;

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

    color:#5f4b32;
}

.recipe-centre__info-icon svg{
    width:28px;
    height:28px;
}

.recipe-centre__info-label{
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#4d4d4d;
    font-weight:600;
    text-align:center;
}

.recipe-centre__info-value{
    font-size:1.4rem;
    font-weight:700;
    color:#222;
    text-align:center;
    line-height:1.35;
}

.recipe-centre__info-value p {
  margin: 0;
}

/* ==========================================================
   INGREDIENTS + METHOD
========================================================== */

.recipe-centre__content-grid {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(420px, 3fr);
  gap: 70px;
  align-items: start;
}

.recipe-centre__ingredients,
.recipe-centre__method {
  min-width: 0;
}

.recipe-centre__richtext {
  line-height: 1.9;
}

.recipe-centre__richtext p {
  margin: 0 0 1rem;
}

.recipe-centre__richtext p:last-child {
  margin-bottom: 0;
}

/* ---------- Lists ---------- */

.recipe-centre__richtext ul,
.recipe-centre__richtext ol {
  margin: 0;
  padding-left: 1.4rem;
}

.recipe-centre__richtext li {
  margin-bottom: .8rem;
}

.recipe-centre__richtext li:last-child {
  margin-bottom: 0;
}

/* Nested lists */

.recipe-centre__richtext li ul,
.recipe-centre__richtext li ol {
  margin-top: .6rem;
}

/* ==========================================
   INGREDIENTS LIST
========================================== */

.recipe-centre__ingredients .rte ul {
  margin: 1rem 0;
  padding-left: 1.8rem;
  list-style-position: outside;
}

.recipe-centre__ingredients .rte li {
  margin-bottom: 0.8rem;
  line-height: 1.8;
  padding-left: 0.35rem;
}

/* ==========================================================
   METHOD LIST
========================================================== */

.recipe-centre__method .rte ul {
  margin: 0.75rem 0 1.5rem 2rem;
  padding: 0;
  list-style-position: outside;
}

.recipe-centre__method .rte li {
  margin-bottom: 0.8rem;
  line-height: 1.8;
}

.recipe-centre__method .rte p {
  margin-bottom: 1rem;
  font-weight: 600;
}

/* ==========================================================
   PRODUCTS
========================================================== */

.recipe-centre__products {
  margin-top: 8rem;
}

.recipe-centre__section-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: .6rem;
    max-width: 600px;
}

.recipe-centre__products-intro {
  margin: 0 0 3.6rem;
  font-size: 1.6rem;
  line-height: 1.7;
  color: rgba(0,0,0,.7);
}

.recipe-centre__products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}

.recipe-product-card {
  background: #FCFAEB;
  border: 1px solid #ece6df;
  border-radius: 14px;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  min-height: 425px;

  transition: all .25s ease;
}

.recipe-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.recipe-product-card__image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.recipe-product-card__content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 2rem;
}

.recipe-product-card__title {
  margin: 0 0 1.6rem;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.45;
}

.recipe-product-card__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1.45;
  max-height: calc(1.45em * 2);

  color: inherit;
  text-decoration: none;
}

.recipe-product-card__button {
  margin-top: auto;

  display: block;
  width: 100%;
  padding: 1rem 1.2rem;

  text-align: center;
  border-radius: 8px;

  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.4rem;
}

.recipe-product-card__button:hover {
  background: #333;
}

{% if recipe.chefs_tips != blank %}

  <section class="recipe-centre__tips">

  <div class="recipe-tip-card">

    <div class="recipe-tip-card__icon">

      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
        <path d="M9 18h6"/>
        <path d="M10 22h4"/>
        <path d="M12 2a7 7 0 0 0-4 12c1 1 2 2 2 4h4c0-2 1-3 2-4a7 7 0 0 0-4-12z"/>
      </svg>

    </div>

    <div class="recipe-tip-card__content">

      <h2 class="recipe-tip-card__title">
        The Malabari Merchant Tips
      </h2>

      <div class="recipe-tip-card__text rte">
        {{ recipe.chefs_tips | metafield_tag }}
      </div>

    </div>

  </div>

</section>

{% endif %}

/* ==========================================================
   THE MALABARI MERCHANT TIPS
========================================================== */

.recipe-tip-card {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;

  padding: 2.2rem 2.6rem;

  background: #fcf9f4;
    border: 1px solid #eadfce;
  border-radius: 16px;
}

.recipe-tip-card__icon {
  width: 64px;
  height: 64px;
  min-width: 64px;

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

  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e9dfd2;
}

.recipe-tip-card__icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.recipe-tip-card__content {
  flex: 1;
}

.recipe-tip-card__title {
  margin: 0 0 1.2rem;

  font-size: 2rem;
  font-weight: 700;
}

.recipe-tip-card__text {
  font-size: 1.6rem;
  line-height: 1.8;
}

.recipe-tip-card__text p:last-child {
  margin-bottom: 0;
}
/* ==========================================================
   TIPS
========================================================== */

.recipe-tip-card {
  display: flex;
  gap: 2.8rem;
  align-items: flex-start;

  padding: 2.4rem;

  border: 1px solid #e8ddd1;
  border-radius: 18px;

  background: #faf7f2;
}

.recipe-tip-card__icon {
  flex: 0 0 56px;

  width: 56px;
  height: 56px;

  border-radius: 50%;

  background: #fff;
  border: 1px solid #e8ddd1;

  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-tip-card__icon svg{
  width:28px;
  height:28px;
}

.recipe-tip-card__content{
  flex:1;
}

.recipe-tip-card__title{
  margin:0 0 1.2rem;
}

/* ---------- THIS IS THE IMPORTANT PART ---------- */

.recipe-tip-card__text .metafield-rich_text_field ul{
  margin:0;
  padding-left:1.8rem;
  list-style-position:outside;
}

.recipe-tip-card__text .metafield-rich_text_field li{
  margin-bottom:.8rem;
  line-height:1.8;
  padding-left:.35rem;
}

.recipe-tip-card__text .metafield-rich_text_field li:last-child{
  margin-bottom:0;
}
/* ==========================================================
   RECIPE CARD
========================================================== */

.recipe-card{

    background:#fff;

    border:1px solid #ece6df;

    border-radius:14px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    min-height:345px;

    transition:.25s ease;
}

.recipe-card:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.recipe-card__image{

    display:block;

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;
}

.recipe-card__content{

    padding:2rem;

    display:flex;

    flex-direction:column;

    flex:1;
}

.recipe-card__title{

    font-size:1.55rem;

    font-weight:600;

    line-height:1.45;

    margin:0 0 1.6rem;

    min-height:4.5rem;
}

.recipe-card__title a{

    color:inherit;

    text-decoration:none;
}

.recipe-card__meta{

    display:flex;

    justify-content:space-between;

    font-size:1.35rem;

    color:#6b6b6b;

    margin-bottom:2rem;
}

.recipe-card__button{

    margin-top:auto;

    display:block;

    width:100%;

    padding:1rem;

    text-align:center;

    background:#111;

    color:#fff;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;
}
/* ==========================================================
   MOBILE
========================================================== */

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

  /* Hero */

  .recipe-centre__hero{
    margin:20px 0 40px;
  }

  .recipe-centre__title{
    font-size:2.8rem;
  }

  .recipe-centre__description{
    font-size:1.5rem;
  }

  /* Summary cards */

  .recipe-centre__info-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin:32px 0 40px;
  }

  /* Ingredients + Method */

  .recipe-centre__content-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  /* Tips */

  .recipe-tip-card{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:24px;
  }

  /* Products */

  .recipe-centre__products-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  /* Related recipes */

  .recipe-centre__related-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  /* Section headers */

  .recipe-centre__section-header{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

}

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

.recipe-centre__content h2,
.recipe-centre__section-title,
.recipe-tip-card__title {

  position: relative;
  display: inline-block;

  margin-bottom: 2rem;

  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;

}

.recipe-centre__content h2::after,
.recipe-centre__section-title::after,
.recipe-tip-card__title::after {

  content: "";

  display: block;

  width: var(--tmm-section-accent-width);
  height: var(--tmm-section-accent-height);

  margin-top: var(--tmm-section-accent-spacing);

  border-radius: 999px;

  background: var(--tmm-section-accent-colour);

}

/* ==========================================================
   HERO WIDTH OPTIONS
========================================================== */

.recipe-centre__hero-image-wrapper--standard{
    max-width:100%;
    margin:0 auto 24px;
}

.recipe-centre__hero-image-wrapper--wide{
    max-width:1400px;
    margin:0 auto 24px;
}