/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:53 Unexpected "("
Line 19:1 Expected identifier but found "%"
Line 21:0 Unexpected "{"
Line 21:1 Expected identifier but found "%"
Line 28:0 Unexpected "{"
Line 28:1 Expected identifier but found "%"
Line 36:12 Expected identifier but found whitespace
Line 36:14 Unexpected "{"
... and 97 more hidden warnings

**/
{% comment %}
  Announcement Bar com controles de tamanho de fonte (PPMX)
  Ajuste pelo Theme Editor (Customize)
{% endcomment %}

{% liquid
  assign ann_font_size               = section.settings.ann_font_size               | default: 18
  assign ann_highlight_size          = section.settings.ann_highlight_size          | default: 22
  assign ann_font_size_mobile        = section.settings.ann_font_size_mobile        | default: 16
  assign ann_highlight_size_mobile   = section.settings.ann_highlight_size_mobile   | default: 20
%}

{% style %}
/* ================================
   FONTES DO ANNOUNCEMENT BAR
   ================================ */

/* Desktop/base – aplica em TUDO dentro dos blocos esquerdo e direito */
.brator-header-top-bar-area .brator-header-top-bar-info-left *,
.brator-header-top-bar-area .brator-header-top-bar-info-right *{
  font-size: {{ ann_font_size }}px !important;
  line-height: 1.35;
}

/* Destaque (.c-ts) */
.brator-header-top-bar-area .c-ts{
  font-size: {{ ann_highlight_size }}px !important;
  font-weight: 700;
}

/* Mobile (até 767px) */
@media (max-width: 767px){
  .brator-header-top-bar-area .brator-header-top-bar-info-left *,
  .brator-header-top-bar-area .brator-header-top-bar-info-right *{
    font-size: {{ ann_font_size_mobile }}px !important;
  }
  .brator-header-top-bar-area .c-ts{
    font-size: {{ ann_highlight_size_mobile }}px !important;
  }
}
{% endstyle %}

{%- if section.settings.topbar_style == 'topbar_style_one' -%}
  <div class="brator-header-top-bar-area design-one">
    <div class="container-xxxl container-xxl container">
      <div class="row">
        <div class="col-12">
          <div class="brator-header-top-bar-info-left">
            {% for block in section.blocks %}
              {%- case block.type -%}
                {%- when '@app' -%}
                  {% render block %}
                {% when 'content' %}
                  {{ block.settings.html_content }}
              {% endcase %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>

{%- elsif section.settings.topbar_style == 'topbar_style_two' -%}
  <div class="brator-header-top-bar-area design-one dark-bg">
    <div class="container-xxxl container-xxl container">
      <div class="row">
        {% for block in section.blocks %}
          {%- case block.type -%}
            {%- when '@app' -%}
              {% render block %}
            {% when 'content' %}
              <div class="col-lg-6 col-12">
                <div class="brator-header-top-bar-info-left">
                  {{ block.settings.html_content }}
                </div>
              </div>
            {% when 'info_content' %}
              <div class="col-lg-6 col-12">
                <div class="brator-header-top-bar-info-right">
                  <div class="brator-header-top-bar-info-right-link"><a href="{{ block.settings.info_link }}">{{ block.settings.info_text }}</a></div>
                  <div class="brator-header-top-bar-info-right-link last-child"><a href="{{ block.settings.info_link_two }}">{{ block.settings.info_text_two }}</a></div>
                </div>
              </div>
          {% endcase %}
        {% endfor %}
      </div>
    </div>
  </div>

{%- elsif section.settings.topbar_style == 'topbar_style_three' -%}
  <div class="brator-header-top-bar-area design-one light-bg">
    <div class="container-xxxl container-xxl container">
      <div class="row">
        {% for block in section.blocks %}
          {%- case block.type -%}
            {%- when '@app' -%}
              {% render block %}
            {% when 'content' %}
              <div class="col-lg-6 col-12">
                <div class="brator-header-top-bar-info-left">
                  {{ block.settings.html_content }}
                </div>
              </div>
            {% when 'info_content' %}
              <div class="col-lg-6 col-12">
                <div class="brator-header-top-bar-info-right">
                  <div class="brator-header-top-bar-info-right-link"><a href="{{ block.settings.info_link }}">{{ block.settings.info_text }}</a></div>
                  <div class="brator-header-top-bar-info-right-link last-child"><a href="{{ block.settings.info_link_two }}">{{ block.settings.info_text_two }}</a></div>
                </div>
              </div>
          {% endcase %}
        {% endfor %}
      </div>
    </div>
  </div>
{%- endif -%}

{% schema %}
{
  "name": "Announcement Bar",
  "tag": "section",
  "class": "brator-header-top-bar-area-main",
  "settings": [
    {
      "label": "Style",
      "id": "topbar_style",
      "type": "select",
      "default": "topbar_style_one",
      "options": [
        { "value": "topbar_style_one",   "label": "Topbar style one" },
        { "value": "topbar_style_two",   "label": "Topbar style two" },
        { "value": "topbar_style_three", "label": "Topbar style three" }
      ]
    },
    {
      "type": "range",
      "id": "ann_font_size",
      "label": "Tamanho base do texto (px)",
      "min": 12,
      "max": 40,
      "step": 1,
      "default": 18
    },
    {
      "type": "range",
      "id": "ann_highlight_size",
      "label": "Tamanho do texto destacado (.c-ts) (px)",
      "min": 14,
      "max": 50,
      "step": 1,
      "default": 22
    },
    {
      "type": "range",
      "id": "ann_font_size_mobile",
      "label": "Tamanho base no mobile (px)",
      "min": 10,
      "max": 36,
      "step": 1,
      "default": 16
    },
    {
      "type": "range",
      "id": "ann_highlight_size_mobile",
      "label": "Tamanho do destaque no mobile (px)",
      "min": 12,
      "max": 46,
      "step": 1,
      "default": 20
    }
  ],
  "blocks": [
    {
      "type": "@app"
    },
    {
      "name": "Content",
      "limit": 1,
      "type": "content",
      "settings": [
        {
          "type": "html",
          "id": "html_content",
          "label": "Content",
          "default": "<p><span class='c-ts'>BLACK FRIDAY</span><span>: Discount up to</span><span class='c-ts'>50%</span><span>use code</span><b>Brator50</b></p><a href='#_'>See more</a>"
        }
      ]
    },
    {
      "name": "Info Content",
      "limit": 1,
      "type": "info_content",
      "settings": [
        {
          "type": "url",
          "id": "info_link",
          "info": "this for style two/three",
          "label": "Info link"
        },
        {
          "type": "text",
          "id": "info_text",
          "label": "Info Text",
          "info": "this for style two/three",
          "default": "Sell on Brator"
        },
        {
          "type": "url",
          "id": "info_link_two",
          "info": "this for style two/three",
          "label": "Info link Two"
        },
        {
          "type": "text",
          "id": "info_text_two",
          "label": "Info Text Two",
          "info": "this for style two/three",
          "default": "Get Offer"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Announcement Bar",
      "category": "Header"
    }
  ]
}
{% endschema %}