/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 20:0 Unexpected "<"
Line 23:9 Unterminated string token
Line 24:15 Unexpected "{"
Line 24:24 Expected ":"
Line 24:53 Unexpected ";"
Line 25:21 Expected identifier but found "%"
Line 25:71 Unexpected "url("
Line 25:143 Expected identifier but found "%"
... and 373 more hidden warnings

**/
{% liquid
  assign section_id = 'app-download-' | append: section.id
%}

<section
  id="{{ section_id }}"
  class="app-download-section"
  style="
    --app-bg: {{ section.settings.background_color }};
    --app-bg-image: {% if section.settings.background_image != blank %}url('{{ section.settings.background_image | image_url: width: 2400 }}'){% else %}none{% endif %};
    --heading-color: {{ section.settings.heading_color }};
    --subheading-color: {{ section.settings.subheading_color }};
    --section-padding-top: {{ section.settings.padding_top }}px;
    --section-padding-bottom: {{ section.settings.padding_bottom }}px;
    --desktop-left-width: {{ section.settings.desktop_left_width }}%;
    --desktop-right-width: {{ 100 | minus: section.settings.desktop_left_width }}%;
    --mobile-image-width: {{ section.settings.mobile_image_width }}%;
    --heading-size: {{ section.settings.heading_size }}px;
    --subheading-size: {{ section.settings.subheading_size }}px;
    --image-radius: {{ section.settings.image_radius }}px;
  "
>

  <div class="app-download-container">

    <!-- =========================================
         LEFT COLUMN
    ========================================== -->

    <div class="app-download-left">

      {% if section.settings.left_image != blank %}

        <div class="app-download-image-wrap">

          {{
            section.settings.left_image
            | image_url: width: 1400
            | image_tag:
              loading: 'lazy',
              widths: '400, 600, 800, 1000, 1200, 1400',
              class: 'app-download-main-image',
              alt: section.settings.heading
          }}

        </div>

      {% endif %}

    </div>


    <!-- =========================================
         RIGHT COLUMN
    ========================================== -->

    <div class="app-download-right">


      <!-- LOGO -->

      {% if section.settings.logo_image != blank %}

        <div class="app-download-logo">

          {{
            section.settings.logo_image
            | image_url: width: 400
            | image_tag:
              loading: 'lazy',
              class: 'app-download-logo-image',
              alt: 'App Logo'
          }}

        </div>

      {% endif %}


      <!-- HEADING -->

      {% if section.settings.heading != blank %}

        <h2 class="app-download-heading">
          {{ section.settings.heading }}
        </h2>

      {% endif %}


      <!-- SUBHEADING -->

      {% if section.settings.subheading != blank %}

        <div class="app-download-subheading">
          {{ section.settings.subheading }}
        </div>

      {% endif %}


      <!-- =========================================
           APP STORE BUTTONS
      ========================================== -->

      {% if section.settings.google_play_image != blank
        or section.settings.app_store_image != blank %}

        <div class="app-download-buttons">


          <!-- GOOGLE PLAY -->

          {% if section.settings.google_play_image != blank %}

            <a
              href="{{ section.settings.google_play_url | default: '#' }}"
              class="app-store-button"
              {% if section.settings.google_play_url != blank %}
                target="_blank"
                rel="noopener noreferrer"
              {% endif %}
            >

              {{
                section.settings.google_play_image
                | image_url: width: 700
                | image_tag:
                  loading: 'lazy',
                  class: 'app-store-image',
                  alt: 'Get it on Google Play'
              }}

            </a>

          {% endif %}


          <!-- APP STORE -->

          {% if section.settings.app_store_image != blank %}

            <a
              href="{{ section.settings.app_store_url | default: '#' }}"
              class="app-store-button"
              {% if section.settings.app_store_url != blank %}
                target="_blank"
                rel="noopener noreferrer"
              {% endif %}
            >

              {{
                section.settings.app_store_image
                | image_url: width: 700
                | image_tag:
                  loading: 'lazy',
                  class: 'app-store-image',
                  alt: 'Download on the App Store'
              }}

            </a>

          {% endif %}


        </div>

      {% endif %}


      <!-- =========================================
           QR CODE
      ========================================== -->

      {% if section.settings.qr_code != blank %}

        {% if section.settings.qr_text != blank %}

          <div class="app-download-qr-text">
            {{ section.settings.qr_text }}
          </div>

        {% endif %}


        <div class="app-download-qr">

          {{
            section.settings.qr_code
            | image_url: width: 500
            | image_tag:
              loading: 'lazy',
              class: 'qr-code-image',
              alt: 'Scan QR Code'
          }}

        </div>

      {% endif %}


    </div>

  </div>

</section>


<style>

/* =========================================
   MAIN SECTION
========================================= */

#{{ section_id }} {

  width: 100%;

  background-color: var(--app-bg);

  background-image: var(--app-bg-image);

  background-size: {{ section.settings.background_size }};

  background-position: {{ section.settings.background_position }};

  background-repeat: {{ section.settings.background_repeat }};

  background-attachment: {{ section.settings.background_attachment }};

  padding-top: var(--section-padding-top);

  padding-bottom: var(--section-padding-bottom);

  overflow: hidden;

}


/* =========================================
   CONTAINER
========================================= */

#{{ section_id }} .app-download-container {

  width: 100%;

  max-width: {{ section.settings.container_width }}px;

  margin: 0 auto;

  padding-left: {{ section.settings.side_padding }}px;

  padding-right: {{ section.settings.side_padding }}px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

}


/* =========================================
   LEFT COLUMN
========================================= */

#{{ section_id }} .app-download-left {

  width: var(--desktop-left-width);

  display: flex;

  align-items: center;

  justify-content: {{ section.settings.left_image_alignment }};

  flex-shrink: 0;

}


#{{ section_id }} .app-download-image-wrap {

  width: {{ section.settings.left_image_width }}%;

  max-width: {{ section.settings.left_image_max_width }}px;

  display: flex;

  justify-content: center;

}


#{{ section_id }} .app-download-main-image {

  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;

  border-radius: var(--image-radius);

}


/* =========================================
   RIGHT COLUMN
========================================= */

#{{ section_id }} .app-download-right {

  width: var(--desktop-right-width);

  display: flex;

  flex-direction: column;

  align-items: {{ section.settings.content_alignment }};

  text-align: {{ section.settings.text_alignment }};

}


/* =========================================
   LOGO
========================================= */

#{{ section_id }} .app-download-logo {

  width: {{ section.settings.logo_width }}px;

  margin-bottom: {{ section.settings.logo_bottom_spacing }}px;

}


#{{ section_id }} .app-download-logo-image {

  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;

}


/* =========================================
   HEADING
========================================= */

#{{ section_id }} .app-download-heading {

  margin: 0;

  margin-bottom: {{ section.settings.heading_bottom_spacing }}px;

  color: var(--heading-color);

  font-size: var(--heading-size);

  line-height: 1.15;

  font-weight: {{ section.settings.heading_weight }};

  letter-spacing: {{ section.settings.heading_letter_spacing }}px;

}


/* =========================================
   SUBHEADING
========================================= */

#{{ section_id }} .app-download-subheading {

  margin-bottom: {{ section.settings.subheading_bottom_spacing }}px;

  color: var(--subheading-color);

  font-size: var(--subheading-size);

  line-height: 1.4;

  font-weight: {{ section.settings.subheading_weight }};

}


#{{ section_id }} .app-download-subheading p {

  margin: 0;

}


/* =========================================
   APP STORE BUTTONS
========================================= */

#{{ section_id }} .app-download-buttons {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: {{ section.settings.store_button_gap }}px;

  width: 100%;

  margin-bottom: {{ section.settings.store_buttons_bottom_spacing }}px;

}


#{{ section_id }} .app-store-button {

  display: block;

  width: {{ section.settings.store_button_width }}px;

  max-width: 100%;

  transition: transform 0.25s ease;

}


#{{ section_id }} .app-store-button:hover {

  transform: translateY(-3px);

}


#{{ section_id }} .app-store-image {

  display: block;

  width: 100%;

  height: auto;

}


/* =========================================
   QR CODE
========================================= */

#{{ section_id }} .app-download-qr-text {

  color: var(--subheading-color);

  font-size: {{ section.settings.qr_text_size }}px;

  line-height: 1.3;

  margin-bottom: {{ section.settings.qr_text_spacing }}px;

}


#{{ section_id }} .app-download-qr {

  width: {{ section.settings.qr_width }}px;

  max-width: 100%;

}


#{{ section_id }} .qr-code-image {

  display: block;

  width: 100%;

  height: auto;

}


/* =========================================
   TABLET
========================================= */

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

  #{{ section_id }} .app-download-container {

    padding-left: 25px;

    padding-right: 25px;

  }


  #{{ section_id }} .app-download-heading {

    font-size: calc(var(--heading-size) * 0.80);

  }


  #{{ section_id }} .app-download-subheading {

    font-size: calc(var(--subheading-size) * 0.90);

  }


  #{{ section_id }} .app-store-button {

    width: min(
      {{ section.settings.store_button_width }}px,
      45%
    );

  }


  #{{ section_id }} .app-download-qr {

    width: min(
      {{ section.settings.qr_width }}px,
      35%
    );

  }

}


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

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

  #{{ section_id }} {

    padding-top: {{ section.settings.mobile_padding_top }}px;

    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;

    background-attachment: scroll;

  }


  #{{ section_id }} .app-download-container {

    flex-direction: column;

    gap: {{ section.settings.mobile_column_gap }}px;

    padding-left: 20px;

    padding-right: 20px;

  }


  #{{ section_id }} .app-download-left,

  #{{ section_id }} .app-download-right {

    width: 100%;

  }


  #{{ section_id }} .app-download-left {

    justify-content: center;

  }


  #{{ section_id }} .app-download-image-wrap {

    width: var(--mobile-image-width);

    max-width: {{ section.settings.mobile_image_max_width }}px;

  }


  #{{ section_id }} .app-download-right {

    align-items: center;

    text-align: center;

  }


  #{{ section_id }} .app-download-logo {

    width: {{ section.settings.mobile_logo_width }}px;

  }


  #{{ section_id }} .app-download-heading {

    font-size: {{ section.settings.mobile_heading_size }}px;

    line-height: 1.2;

  }


  #{{ section_id }} .app-download-subheading {

    font-size: {{ section.settings.mobile_subheading_size }}px;

  }


  #{{ section_id }} .app-download-buttons {

    gap: 12px;

  }


  #{{ section_id }} .app-store-button {

    width: 46%;

  }


  #{{ section_id }} .app-download-qr {

    width: {{ section.settings.mobile_qr_width }}px;

  }

}


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

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

  #{{ section_id }} .app-download-container {

    padding-left: 15px;

    padding-right: 15px;

  }


  #{{ section_id }} .app-download-heading {

    font-size: {{ section.settings.small_mobile_heading_size }}px;

  }


  #{{ section_id }} .app-download-subheading {

    font-size: {{ section.settings.small_mobile_subheading_size }}px;

  }


  #{{ section_id }} .app-download-buttons {

    flex-direction: column;

    width: 100%;

  }


  #{{ section_id }} .app-store-button {

    width: {{ section.settings.small_mobile_store_width }}px;

    max-width: 90%;

  }


  #{{ section_id }} .app-download-qr {

    width: {{ section.settings.small_mobile_qr_width }}px;

  }

}

</style>


{% schema %}

{
  "name": "App Download Banner",
  "tag": "section",
  "class": "app-download-banner-section",

  "settings": [

    {
      "type": "header",
      "content": "Main Content"
    },

    {
      "type": "image_picker",
      "id": "left_image",
      "label": "Left Column Image"
    },

    {
      "type": "image_picker",
      "id": "logo_image",
      "label": "App Logo / Icon"
    },

    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Beauty in Your Hands"
    },

    {
      "type": "richtext",
      "id": "subheading",
      "label": "Subheading",
      "default": "<p>Download the Makeup Mistry App</p>"
    },


    {
      "type": "header",
      "content": "Google Play"
    },

    {
      "type": "image_picker",
      "id": "google_play_image",
      "label": "Google Play Image"
    },

    {
      "type": "url",
      "id": "google_play_url",
      "label": "Google Play Link"
    },


    {
      "type": "header",
      "content": "App Store"
    },

    {
      "type": "image_picker",
      "id": "app_store_image",
      "label": "App Store Image"
    },

    {
      "type": "url",
      "id": "app_store_url",
      "label": "App Store Link"
    },


    {
      "type": "header",
      "content": "QR Code"
    },

    {
      "type": "text",
      "id": "qr_text",
      "label": "QR Text",
      "default": "Scan to Download"
    },

    {
      "type": "image_picker",
      "id": "qr_code",
      "label": "QR Code"
    },


    {
      "type": "header",
      "content": "Background"
    },

    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image"
    },

    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#A63CEB"
    },

    {
      "type": "select",
      "id": "background_size",
      "label": "Background Size",
      "options": [
        {
          "value": "cover",
          "label": "Cover"
        },
        {
          "value": "contain",
          "label": "Contain"
        },
        {
          "value": "100% 100%",
          "label": "Stretch"
        },
        {
          "value": "auto",
          "label": "Original Size"
        }
      ],
      "default": "cover"
    },

    {
      "type": "select",
      "id": "background_position",
      "label": "Background Position",
      "options": [
        {
          "value": "center center",
          "label": "Center"
        },
        {
          "value": "left center",
          "label": "Left"
        },
        {
          "value": "right center",
          "label": "Right"
        },
        {
          "value": "center top",
          "label": "Top Center"
        },
        {
          "value": "center bottom",
          "label": "Bottom Center"
        }
      ],
      "default": "center center"
    },

    {
      "type": "select",
      "id": "background_repeat",
      "label": "Background Repeat",
      "options": [
        {
          "value": "no-repeat",
          "label": "No Repeat"
        },
        {
          "value": "repeat",
          "label": "Repeat"
        }
      ],
      "default": "no-repeat"
    },

    {
      "type": "select",
      "id": "background_attachment",
      "label": "Background Attachment",
      "options": [
        {
          "value": "scroll",
          "label": "Scroll"
        },
        {
          "value": "fixed",
          "label": "Fixed"
        }
      ],
      "default": "scroll"
    },


    {
      "type": "header",
      "content": "Colors"
    },

    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#FFFFFF"
    },

    {
      "type": "color",
      "id": "subheading_color",
      "label": "Subheading Color",
      "default": "#FFFFFF"
    },


    {
      "type": "header",
      "content": "Desktop Layout"
    },

    {
      "type": "range",
      "id": "desktop_left_width",
      "label": "Left Column Width",
      "min": 30,
      "max": 60,
      "step": 1,
      "unit": "%",
      "default": 40
    },

    {
      "type": "range",
      "id": "left_image_width",
      "label": "Left Image Width",
      "min": 40,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 85
    },

    {
      "type": "range",
      "id": "left_image_max_width",
      "label": "Left Image Max Width",
      "min": 300,
      "max": 800,
      "step": 10,
      "unit": "px",
      "default": 600
    },

    {
      "type": "select",
      "id": "left_image_alignment",
      "label": "Left Image Alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "flex-end",
          "label": "Right"
        }
      ],
      "default": "center"
    },

    {
      "type": "range",
      "id": "container_width",
      "label": "Container Width",
      "min": 900,
      "max": 1800,
      "step": 50,
      "unit": "px",
      "default": 1400
    },

    {
      "type": "range",
      "id": "side_padding",
      "label": "Side Padding",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "default": 30
    },


    {
      "type": "header",
      "content": "Content Alignment"
    },

    {
      "type": "select",
      "id": "content_alignment",
      "label": "Content Alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "flex-end",
          "label": "Right"
        }
      ],
      "default": "center"
    },

    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },


    {
      "type": "header",
      "content": "Typography"
    },

    {
      "type": "range",
      "id": "heading_size",
      "label": "Heading Size",
      "min": 20,
      "max": 80,
      "step": 1,
      "unit": "px",
      "default": 48
    },

    {
      "type": "select",
      "id": "heading_weight",
      "label": "Heading Weight",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        },
        {
          "value": "600",
          "label": "Semi Bold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ],
      "default": "700"
    },

    {
      "type": "range",
      "id": "heading_letter_spacing",
      "label": "Heading Letter Spacing",
      "min": -2,
      "max": 5,
      "step": 0.5,
      "unit": "px",
      "default": 0
    },

    {
      "type": "range",
      "id": "subheading_size",
      "label": "Subheading Size",
      "min": 14,
      "max": 40,
      "step": 1,
      "unit": "px",
      "default": 24
    },

    {
      "type": "select",
      "id": "subheading_weight",
      "label": "Subheading Weight",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        },
        {
          "value": "600",
          "label": "Semi Bold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ],
      "default": "400"
    },


    {
      "type": "header",
      "content": "Logo"
    },

    {
      "type": "range",
      "id": "logo_width",
      "label": "Logo Width",
      "min": 40,
      "max": 200,
      "step": 5,
      "unit": "px",
      "default": 100
    },

    {
      "type": "range",
      "id": "logo_bottom_spacing",
      "label": "Logo Bottom Spacing",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "default": 20
    },


    {
      "type": "header",
      "content": "Store Buttons"
    },

    {
      "type": "range",
      "id": "store_button_width",
      "label": "Button Width",
      "min": 120,
      "max": 400,
      "step": 5,
      "unit": "px",
      "default": 220
    },

    {
      "type": "range",
      "id": "store_button_gap",
      "label": "Button Gap",
      "min": 5,
      "max": 50,
      "step": 5,
      "unit": "px",
      "default": 20
    },

    {
      "type": "range",
      "id": "store_buttons_bottom_spacing",
      "label": "Buttons Bottom Spacing",
      "min": 0,
      "max": 60,
      "step": 5,
      "unit": "px",
      "default": 25
    },


    {
      "type": "header",
      "content": "QR Code"
    },

    {
      "type": "range",
      "id": "qr_width",
      "label": "QR Width",
      "min": 60,
      "max": 250,
      "step": 5,
      "unit": "px",
      "default": 150
    },

    {
      "type": "range",
      "id": "qr_text_size",
      "label": "QR Text Size",
      "min": 12,
      "max": 30,
      "step": 1,
      "unit": "px",
      "default": 18
    },

    {
      "type": "range",
      "id": "qr_text_spacing",
      "label": "QR Text Spacing",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "default": 8
    },


    {
      "type": "header",
      "content": "Desktop Spacing"
    },

    {
      "type": "range",
      "id": "padding_top",
      "label": "Top Padding",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "default": 40
    },

    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom Padding",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "default": 40
    },

    {
      "type": "range",
      "id": "heading_bottom_spacing",
      "label": "Heading Spacing",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "default": 16
    },

    {
      "type": "range",
      "id": "subheading_bottom_spacing",
      "label": "Subheading Spacing",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "default": 20
    },

    {
      "type": "range",
      "id": "image_radius",
      "label": "Image Border Radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "default": 0
    },


    {
      "type": "header",
      "content": "Mobile"
    },

    {
      "type": "range",
      "id": "mobile_image_width",
      "label": "Mobile Image Width",
      "min": 50,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 85
    },

    {
      "type": "range",
      "id": "mobile_image_max_width",
      "label": "Mobile Image Max Width",
      "min": 200,
      "max": 600,
      "step": 10,
      "unit": "px",
      "default": 400
    },

    {
      "type": "range",
      "id": "mobile_logo_width",
      "label": "Mobile Logo Width",
      "min": 40,
      "max": 150,
      "step": 5,
      "unit": "px",
      "default": 80
    },

    {
      "type": "range",
      "id": "mobile_heading_size",
      "label": "Mobile Heading Size",
      "min": 20,
      "max": 50,
      "step": 1,
      "unit": "px",
      "default": 30
    },

    {
      "type": "range",
      "id": "mobile_subheading_size",
      "label": "Mobile Subheading Size",
      "min": 14,
      "max": 30,
      "step": 1,
      "unit": "px",
      "default": 18
    },

    {
      "type": "range",
      "id": "mobile_qr_width",
      "label": "Mobile QR Width",
      "min": 60,
      "max": 180,
      "step": 5,
      "unit": "px",
      "default": 120
    },

    {
      "type": "range",
      "id": "mobile_column_gap",
      "label": "Mobile Column Gap",
      "min": 10,
      "max": 80,
      "step": 5,
      "unit": "px",
      "default": 30
    },

    {
      "type": "range",
      "id": "mobile_padding_top",
      "label": "Mobile Top Padding",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "px",
      "default": 30
    },

    {
      "type": "range",
      "id": "mobile_padding_bottom",
      "label": "Mobile Bottom Padding",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "px",
      "default": 30
    },

    {
      "type": "range",
      "id": "small_mobile_heading_size",
      "label": "Small Mobile Heading",
      "min": 18,
      "max": 40,
      "step": 1,
      "unit": "px",
      "default": 26
    },

    {
      "type": "range",
      "id": "small_mobile_subheading_size",
      "label": "Small Mobile Subheading",
      "min": 12,
      "max": 25,
      "step": 1,
      "unit": "px",
      "default": 16
    },

    {
      "type": "range",
      "id": "small_mobile_store_width",
      "label": "Small Mobile Store Width",
      "min": 150,
      "max": 350,
      "step": 5,
      "unit": "px",
      "default": 220
    },

    {
      "type": "range",
      "id": "small_mobile_qr_width",
      "label": "Small Mobile QR Width",
      "min": 60,
      "max": 180,
      "step": 5,
      "unit": "px",
      "default": 110
    }

  ],

  "presets": [
    {
      "name": "App Download Banner"
    }
  ]

}

{% endschema %}