/** Shopify CDN: Minification failed

Line 360:0 Unexpected "<"
Line 397:0 Unexpected "<"
Line 439:160 Unterminated string token

**/
/*-----------------------------------------------------------------------------/
/ Custom Theme CSS
/-----------------------------------------------------------------------------*/
/*---------------- Global Custom CSS -------------------*/
.sy-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-conteant: center;
  padding: 14px 26px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
  margin: 0;
  transition: all 0.25s ease;
}

.sy-cta-btn:hover {
  opacity: 0.85;
}

/* Instacart style */
.sy-cta-instacart {
  background-color: #b7e4c7;
  color: #1b4332;
}

/* Weee! style */
.sy-cta-weee {
  background-color: #6c63ff;
  color: #ffffff;
}

/* Button container */
.sy-cta-container {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  position: relative;
  z-index: 50;
}

.t4s-hero .t4s-full-width-link {
  pointer-events: none !important;
}

.sy-cta-btn,
.sy-cta-container,
.sy-cta-container * {
  pointer-events: auto !important;
}

.t4s-collection {
  position: relative;
  z-index: 200;
}

/* ===== PREMIUM RECIPES LANDING PAGE STYLES ===== */

/* Hero Section Enhancement */
.heading-template {
  position: relative;
}

.heading-template .t4s-hero-content {
  z-index: 10;
}

/* Featured Recipe Section */
.image_text {
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

.image_text .bl_text_0 .heading {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 15px;
}

.image_text .bl_text_0 .heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #D62828;
  border-radius: 2px;
}

/* Icon Box Categories */
.iconbox .item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  cursor: pointer;
}

.iconbox .item:hover {
  border-color: #D62828 !important;
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(214, 40, 40, 0.15);
}

.iconbox .item:hover .icon {
  color: #D62828 !important;
  transform: scale(1.1);
}

/* Recipe Grid Cards */
.featured-collection2 .product-item,
.featured-collection2 .product-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-radius: 8px;
  overflow: hidden;
}

.featured-collection2 .product-item:hover,
.featured-collection2 .product-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  transform: translateY(-12px);
}

/* Cooking Basics Section */
.image_text[style*="#F7F7F7"] {
  background-color: #F7F7F7 !important;
}

/* Button Styling - Primary Synear Red */
button.btn-primary,
a.btn-primary,
.button.primary,
.btn.btn-primary {
  background-color: #D62828 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: 600;
}

button.btn-primary:hover,
a.btn-primary:hover,
.button.primary:hover,
.btn.btn-primary:hover {
  background-color: #C01F1F !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(214, 40, 40, 0.3);
}

/* Typography Enhancement */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.5px;
  color: #222222;
}

p {
  color: #878787;
  line-height: 1.6;
}

/* Spacing Enhancements */
section {
  scroll-margin-top: 80px;
}

/* Subheading in Featured Recipe */
.image_text .bl_text_0 .sub_heading {
  color: #D62828 !important;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .image_text .bl_text_0 .heading::after {
    width: 40px;
  }
  
  .iconbox .item {
    margin-bottom: 20px;
  }
  
  .iconbox .item:hover {
    transform: translateY(-4px);
  }
  
  .featured-collection2 .product-item:hover {
    transform: translateY(-6px);
  }
} /* THIS IS THE FIX: Closes the @media query properly */

/* Premium Feel - Subtle Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.image_text,
.iconbox,
.featured-collection2 {
  animation: fadeInUp 0.6s ease-out;
}

/* ============================
   HERO — Responsive Typography & Overlay Upgrade
   ============================ */

/* Main Headline: Responsive size, bold, shadow */
#shopify-section-template--18127460663496__hero_image_9En8c6 .t4s-content-position p:first-of-type {
  --text-fs: clamp(32px, 5vw, 56px) !important;
  --text-fw: 800 !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 800 !important;
  text-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* Add quotation marks to Main Headline */
#shopify-section-template--18127460663496__hero_image_9En8c6 .t4s-content-position p:first-of-type::before {
  content: "“";
}
#shopify-section-template--18127460663496__hero_image_9En8c6 .t4s-content-position p:first-of-type::after {
  content: "”";
}

/* Subheadline: Responsive size, shadow */
#shopify-section-template--18127460663496__hero_image_9En8c6 .t4s-content-position p:last-of-type {
  --text-fs: clamp(16px, 2.5vw, 22px) !important;
  font-size: clamp(16px, 2.5vw, 22px) !important;
  text-shadow: 0 3px 10px rgba(0,0,0,0.4) !important;
}

/* Softer Background Overlay for appetizing food */
#shopify-section-template--18127460663496__hero_image_9En8c6 .t4s-full-width-link {
  --bg-overlay: rgba(0, 0, 0, 0.15) !important;
}

/* ============================================================
   FEATURED RECIPE — PREMIUM EDITORIAL LAYOUT
   ============================================================ */

/* 1. Tighter, premium vertical spacing */
#shopify-section-template--18127460663496__image_text_9Lb4YX {
  --pd-top: clamp(40px, 5vw, 60px) !important;
  --pd-bottom: clamp(40px, 5vw, 60px) !important;
  padding-top: clamp(40px, 5vw, 60px) !important;
  padding-bottom: clamp(40px, 5vw, 60px) !important;
}

/* Increase spacing between image + text columns */
#shopify-section-template--18127460663496__image_text_9Lb4YX .t4s-image-text {
  gap: 50px !important;
}

/* 2. Heading with Red Accent Line */
#shopify-section-template--18127460663496__image_text_9Lb4YX .t4s-image-text-heading {
  position: relative !important;
  padding-top: 20px !important;
  --text-fs: clamp(28px, 4vw, 40px) !important;
  --text-fw: 800 !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #222222 !important;
  margin-bottom: 15px !important;
}

/* The 2px Red Line */
#shopify-section-template--18127460663496__image_text_9Lb4YX .t4s-image-text-heading::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 50px !important;
  height: 3px !important;
  background-color: #D62828 !important;
}

/* ============================================================
   RECIPE CATEGORIES — PNG Hover Fix, Size, and Stacking
   ============================================================ */

/* 1. Force PNG icons to turn pure white on hover */
.t4s-iconbox .t4s-row-cols-lg-5 .t4s-iconbox-inner:hover img {
  filter: brightness(0) invert(1) !important;
  transition: all 0.3s ease !important;
}

/* 2. Force Icon to sit ABOVE the text */
.t4s-iconbox .t4s-row-cols-lg-5 .t4s-iconbox-head {
  display: flex !important;
  flex-direction: column !important; 
  align-items: center !important;
  justify-content: center !important;
}

/* 3. Make the icons larger and fix spacing */
.t4s-iconbox .t4s-row-cols-lg-5 .t4s-iconbox-icon {
  margin-right: 0 !important;
  margin-bottom: 16px !important;
}

/* 4. Enlarge the PNGs */
.t4s-iconbox .t4s-row-cols-lg-5 .t4s-iconbox-icon img {
  width: 80px !important;
  height: auto !important;
  max-width: none !important;
}

/* ============================================================
/* ============================================================
   3-COLUMN RECIPE GRID — CSS Overrides (Bulletproof)
   ============================================================ */

/* 1. Round the image corners */
.t4s-article-thumb, .t4s-article-inner,
.t4s-post-thumb, .t4s-post-inner, 
.t4s-post-thumb img {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* 2. Make titles black, bold, and larger */
.t4s-article-title, .t4s-article-title a,
.t4s-post-title, .t4s-post-title a {
  color: #222222 !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}

/* 3. Lighten the description text so the title pops */
.t4s-article-content .t4s-rte, .t4s-article-content p,
.t4s-post-content, .t4s-post-excerpt {
   color: #555555 !important;
   font-size: 15px !important;
   line-height: 1.5 !important;
}

<style>
  .synear-container { font-family: 'Helvetica Neue', Arial, sans-serif; max-width: 1100px; margin: 0 auto; padding: 20px; color: #333; }
  .synear-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; margin-top: 20px; }
  
  /* Hero Image - Now in the left box position */
  .hero-image-box { width: 100%; border-radius: 8px; overflow: hidden; background: #f0f0f0; }
  .hero-image-box img { width: 100%; display: block; object-fit: cover; }

  /* Recipe Snapshot - More compact */
  .recipe-snapshot { border: 1px solid #eee; padding: 20px; background: #fff; }
  .snapshot-item { display: flex; align-items: center; margin-bottom: 12px; font-size: 14px; border-bottom: 1px solid #f9f9f9; padding-bottom: 8px; }
  .snapshot-item img { width: 24px; height: 24px; margin-right: 12px; }
  .snapshot-label { font-weight: bold; flex-grow: 1; }

  /* Content Styling */
  .section-title { color: #000; font-size: 24px; margin: 25px 0 10px; font-weight: bold; }
  .cultural-context-header { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
  .icon-red { width: 28px; height: 28px; } /* Placeholder for your red icon upload */

  /* Ingredients Grid */
  .ingredients-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; }
  .ingredient-list { list-style: none; padding: 0; }
  .ingredient-list li { display: flex; align-items: flex-start; margin-bottom: 8px; font-size: 14px; }
  .ingredient-icon { width: 16px; height: 16px; margin-right: 8px; margin-top: 2px; }

  /* Instructions */
  .instruction-step { display: flex; gap: 15px; margin-bottom: 20px; }
  .step-number { color: #d32f2f; font-size: 24px; font-weight: bold; }

  /* Video Section - Height restricted */
  .video-container { text-align: center; margin: 40px 0; }
  .video-wrapper { max-width: 800px; margin: 0 auto; height: 450px; background: #000; border-radius: 8px; overflow: hidden; }

  /* Related Articles - Centered */
  .related-articles { display: flex; justify-content: center; gap: 20px; margin-top: 50px; }
  .article-card { width: 300px; text-align: center; }
  .article-card img { width: 100%; border-radius: 4px; }
</style>

<div class="synear-container">
  <div class="synear-grid">
    <div class="hero-image-box">
      <img src="YOUR_ARMY_STEW_LIFESTYLE_IMAGE_URL" alt="Dan Dan Soup Dumplings">
    </div>
    
    <div class="recipe-snapshot">
      <h3 style="margin-top:0">Recipe Snapshot</h3>
      <div class="snapshot-item">
        <img src="/cdn/shop/files/Clock_Icon_nobg.png?v=1773868762" alt="Time"> <span class="snapshot-label">Cook time</span> <span>20 min</span>
      </div>
      <div class="snapshot-item">
        <img src="/cdn/shop/files/People_Icon_nobg.png?v=1773868761" alt="Serves"> <span class="snapshot-label">Serves</span> <span>2–3</span>
      </div>
      <div class="snapshot-item">
        <img src="ICON_LEVEL_URL" alt="Level"> <span class="snapshot-label">Level</span> <span>Easy</span>
      </div>
      <div class="snapshot-item">
        <img src="ICON_ITEM_URL" alt="Item"> <span class="snapshot-label">Item</span> <span>Pork Soup Dumplings</span>
      </div>
      
      <div class="instructions-aside">
        <h4 style="margin-bottom:10px">Cooking Instructions</h4>
        <div class="instruction-step">
          <span class="step-number">1</span>
          <div>
<strong>Whisk Sauce:</strong> Combine sesame paste, vinegar, soy sauce, and chili oil in a bowl.</div>
        </div>
        <div class="instruction-step">
          <span class="step-number">2</span>
          <div>
<strong>Steam:</strong> Arrange Synear dumplings in a steamer and cook for 6-8 minutes. [cite: 26, 28]</div>
        </div>
      </div>
    </div>
  </div>

  <div class="synear-grid" style="grid-template-columns: 1.5fr 1fr;">
    <div>
      <h2 class="section-title">What’s the Scoop?</h2>
      <p>This recipe transforms Synear Pork Soup Dumplings into a Sichuan-inspired Dan Dan masterpiece. It's the perfect blend of creamy, spicy, and savory.</p>

      <div class="cultural-context-header">
        <img src="RED_ICON_URL" class="icon-red" alt="Cultural Icon">
        <h2 class="section-title" style="margin:0">Cultural Context</h2>
      </div>
      <p>Dan Dan Mian is a classic street food from Sichuan province, traditionally known for its spicy, numbing sauce and nutty sesame base.</p>

      <div class="ingredients-grid">
        <div>
          <strong>Core Ingredients</strong>
          <ul class="ingredient-list">
            <li>
<img src="BULLET_ICON_URL" class="ingredient-icon"> 1 Pack Synear Pork Soup Dumplings</li>
            <li>
<img src="BULLET_ICON_URL" class="ingredient-icon"> 2 tbsp Chinese Sesame Paste</li>
          </ul>
        </div>
        <div>
          <strong>Broth & Garnish</strong>
          <ul class="ingredient-list">
            <li>
<img src="GARNISH_ICON_URL" class="ingredient-icon"> 2 tbsp Chili Oil with Flakes</li>
            <li>
<img src="GARNISH_ICON_URL" class="ingredient-icon"> Sliced Green Onions</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="video-container">
    <h2 class="section-title">Watch the Video</h2>
    <div class="video-wrapper">
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/t14XZG8jzM4" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

  <h2 class="section-title" style="text-align:center">Related Articles</h2>
  <div class="related-articles">
    <div class="article-card">
      <img src="IMAGE_URL_1" alt="Pan Fried">
      <p><strong>Golden-Crisp Pan-Fried Dumplings</strong></p>
    </div>
    <div class="article-card">
      <img src="IMAGE_URL_2" alt="Panda Buns">
      <p><strong>Perfect Morning Duo: Panda Buns</strong></p>
    </div>
  </div>
</div>

/* =========================================
   RECIPE BLOG POST LAYOUT 
   ========================================= */
.dandan-container { font-family: 'Helvetica Neue', Arial, sans-serif; max-width: 1100px; margin: 0 auto; background: #ffffff; }
.dandan-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 50px; }
.feature-img-box img { width: 100%; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: block; }

/* Snapshot Card */
.snapshot-card { border: 1px solid #eee; padding: 30px; border-radius: 12px; background: #fff; height: fit-content; }
.snapshot-row { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid #f5f5f5; }
.snapshot-row img { width: 35px !important; height: 35px !important; margin-right: 15px; display: inline-block; }
.snapshot-label { font-weight: 800; flex-grow: 1; color: #222; }
.step-num { color: #D62828; font-size: 26px; font-weight: 800; margin-right: 15px; }
.section-heading { font-size: 32px; font-weight: 800; margin-top: 40px; color: #222; }

/* Ingredients */
.ingredients-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; background: #fdfdfd; padding: 20px; border-radius: 12px; border: 1px solid #eee; }
.ingredients-grid ul { list-style: none; padding: 0; margin-top: 10px; }
.ingredients-grid li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; color: #555; line-height: 1.4; }
.bullet-icon { width: 16px; height: 16px; margin-top: 3px; }

/* ================================
   SECTION 1: STICKY HERO + VALUE ICONS
   ================================ */
.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 80px;
}

.sticky-visual {
  position: sticky;
  top: 100px;
}

.product-hero-visual img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
}

/* cinemagraph placeholder note: ensure video/canvas uses same container */
.product-hero-secondary {
  margin-top: 16px;
}

.product-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* Allergen icons directly under title */
.allergen-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.allergen-icon-row img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Rating + price */
.product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.product-rating .stars {
  color: #f5a623;
  font-size: 18px;
}

.product-price {
  margin-bottom: 20px;
}

.product-price .price-main {
  font-size: 24px;
  font-weight: 700;
  margin-right: 8px;
}

.product-price .price-subcopy {
  font-size: 14px;
  color: #666;
}

/* Value icon bar: Pork & Cabbage, Broth, Wrapper */
.value-icon-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.value-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f7f7f7;
  font-size: 13px;
  font-weight: 600;
}

.value-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Conversion zone buttons (Laoban-style emphasis) */
.conversion-zone {
  margin-top: 10px;
}

.conversion-copy {
  font-size: 14px;
  margin-bottom: 12px;
}

.conversion-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.btn-retail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-instacart {
  background: #00c46a;
}

.btn-weee {
  background: #d62828;
}

.btn-retail:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  filter: brightness(1.05);
}

.conversion-note {
  font-size: 12px;
  color: #777;
}

/* ================================
   SECTION 2: Z-PATTERN + FLOATING GRAPHICS
   ================================ */
.product-story-z {
  position: relative;
  margin-bottom: 90px;
  padding: 60px 0;
}

/* organic blob background wrapper */
.product-story-z.organic-blob-bg {
  overflow: hidden;
}

/* you can attach pseudo-elements to .organic-blob-bg in CSS for blobs */
.story-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}

.story-row:last-child {
  margin-bottom: 0;
}

.story-row-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.story-text h2 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 12px;
}

.story-text p {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

.story-image {
  position: relative;
}

.story-image img {
  width: 100%;
  border-radius: 18px;
  display: block;
}

/* Floating graphics overlapping edges */
.floating-scallion,
.floating-spice {
  position: absolute;
  width: 80px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  animation: float-gentle 8s ease-in-out infinite;
}

/* tweak positions per asset in HTML or via modifiers if needed */
.floating-scallion {
  top: -20px;
  right: -30px;
}

.floating-spice {
  bottom: -25px;
  left: -35px;
}

/* gentle float animation */
@keyframes float-gentle {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* ================================
   SECTION 3: FACE-OFF (kept simple here)
   ================================ */
.synear-faceoff {
  background: #151515;
  color: #f5f5f5;
  padding: 70px 20px;
  margin-bottom: 90px;
}

.faceoff-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.faceoff-visual img {
  width: 100%;
  max-width: 360px;
  display: block;
  margin: 0 auto;
}

.faceoff-content h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 12px;
}

.faceoff-intro {
  font-size: 15px;
  margin-bottom: 20px;
}

/* ================================
   SECTION 4: EDUCATION ZONE + FDA LABEL
   ================================ */
.product-education-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 90px;
}

.education-left h2 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 16px;
}

/* FDA-style Nutrition Facts */
.nutrition-facts {
  max-width: 360px;
  border: 2px solid #000;
  padding: 10px 10px 12px;
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
}

.nutrition-facts table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.nutrition-facts thead th {
  text-align: left;
  font-size: 18px;
  font-weight: 800;
  border-bottom: 8px solid #000;
  padding-bottom: 4px;
}

.nutrition-facts tbody tr td {
  padding: 2px 0;
}

/* bold key lines */
.nutrition-facts tbody tr:nth-child(2) td:first-child, /* Calories label */
.nutrition-facts tbody tr:nth-child(3) td:first-child { /* Total Fat label if placed here */
  font-weight: 700;
}

/* thick divider before footnote */
.nutrition-facts .nutrition-footnote {
  border-top: 4px solid #000;
  padding-top: 4px;
  font-size: 10px;
}

/* Right side accordions */
.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  width: 100%;
  text-align: left;
  padding: 12px 0;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.accordion-body {
  padding: 0 0 14px;
  font-size: 14px;
  color: #444;
}

.instruction-video {
  margin-top: 10px;
}

.video-embed-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.video-embed-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ================================
   SECTION 5: RELATED RECIPES GRID
   ================================ */
.related-recipes {
  margin-bottom: 80px;
}

.related-recipes h2 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 8px;
}

.related-intro {
  font-size: 14px;
  color: #555;
  margin-bottom: 28px;
}

/* Match main Recipes Landing Page 3-column grid */
.related-recipes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.related-card {
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.related-card-image img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.related-card-body {
  padding: 16px 18px 18px;
}

.related-card-body h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}

.related-card-body p {
  font-size: 13px;
  color: #555;
  margin-bottom: 10px;
}

.related-link {
  font-size: 13px;
  font-weight: 700;
  color: #d62828;
}

/* ================================
   RESPONSIVE RULES
   ================================ */
@media (max-width: 960px) {
  .product-hero,
  .story-row,
  .faceoff-inner,
  .product-education-grid,
  .related-recipes-grid {
    grid-template-columns: 1fr;
  }

  .sticky-visual {
    position: static;
  }

  .related-card-image img {
    height: 220px;
  }
}

@media (max-width: 640px) {
  .product-hero {
    gap: 24px;
  }

  .story-row {
    gap: 24px;
  }

  .faceoff-inner {
    gap: 24px;
  }

  .product-education-grid {
    gap: 24px;
  }

  .related-recipes-grid {
    gap: 18px;
  }
}


/*---------------- Custom CSS for only desktop -------------------*/
@media (min-width: 1025px) {
  
}

/*---------------- Custom CSS for tablet, mobile -------------------*/
@media (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only tablet -------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width: 767px){
  
}

/* ==========================================================
   PHASE 1: PREMIUM BROCHURE PRODUCT PAGE (Mila/Bibigo Style)
   ========================================================== */

/* 1. Hide E-commerce Clutter globally (Prices, stock, countdowns) */
.t4s-product__price-review, 
.t4s-sticky-atc, 
.t4s-inventory_qty,
.t4s-pr_delivery,
.t4s-pr_flash_sold,
.t4s-pr_counter {
    display: none !important;
}

/* 2. Premium Product Title */
.t4s-product__title {
    font-family: 'Oswald', sans-serif !important;
    font-size: clamp(32px, 5vw, 48px) !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 20px !important;
    line-height: 1.1 !important;
}

/* 3. Floating Info Card (Premium UI) */
.t4s-product__info-container {
    padding: 40px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.02) !important;
    margin-top: 20px;
}

/* 4. Refined Description Text */
.t4s-product__description {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #444444 !important;
    margin-bottom: 30px !important;
}

.t4s-product__description p {
    margin-bottom: 15px !important;
}

/* 5. Custom "Find in Store" Button */
.btn-catalog-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #d0001b !important;
    color: #ffffff !important;
    border-radius: 50px !important; 
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 18px 40px !important;
    text-decoration: none !important;
    width: 100%;
    box-shadow: 0 8px 24px rgba(208, 0, 27, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.btn-catalog-mode:hover {
    background-color: #a80016 !important; 
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(208, 0, 27, 0.4) !important;
    color: #ffffff !important;
}

/* 6. Mobile adjustments (Overlaps the image slightly) */
@media (max-width: 767px) {
    .t4s-product__info-container {
        margin-top: -40px !important; /* Pulls the card up over the image */
        position: relative !important;
        z-index: 10 !important;
        padding: 30px 20px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}

/* ==========================================================
      MILA-STYLE EDUCATIONAL PRODUCT LAYOUT
      ========================================================== */

   /* Hook Text */
   .t4s-product-hook p {
       font-size: 16px;
       line-height: 1.6;
       color: #555;
       margin-bottom: 25px;
   }

   /* Highlights Grid */
   .t4s-product-highlights {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
       gap: 20px;
       margin-bottom: 30px;
       padding: 20px;
       background: #fdfbf7; /* Warm, premium background */
       border-radius: 12px;
       border: 1px solid #f0ece1;
   }
   .highlight-item {
       text-align: center;
   }
   .highlight-item svg {
       margin-bottom: 10px;
   }
   .highlight-item h4 {
       font-family: 'Oswald', sans-serif;
       font-size: 16px;
       font-weight: 600;
       color: #222;
       margin-bottom: 5px;
       text-transform: uppercase;
   }
   .highlight-item p {
       font-size: 13px;
       line-height: 1.4;
       color: #666;
   }

   /* Accordions (How to Cook / Ingredients) */
   .t4s-product-accordion {
       border-bottom: 1px solid #eee;
       padding: 15px 0;
   }
   .t4s-product-accordion summary {
       font-family: 'Oswald', sans-serif;
       font-size: 18px;
       font-weight: 600;
       text-transform: uppercase;
       cursor: pointer;
       list-style: none;
       position: relative;
       color: #222;
   }
   .t4s-product-accordion summary::-webkit-details-marker {
       display: none;
   }
   .t4s-product-accordion summary::after {
       content: '+';
       position: absolute;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
       font-size: 24px;
       font-weight: 300;
       color: #d0001b;
   }
   .t4s-product-accordion[open] summary::after {
       content: '-';
   }
   .accordion-content {
       padding-top: 15px;
       font-size: 15px;
       line-height: 1.6;
       color: #555;
   }
   .accordion-content ol {
       padding-left: 20px;
   }
   .accordion-content li {
       margin-bottom: 10px;
   }