brooklyn theme - Centre navigation bar

Solved
jtan
Trailblazer
155 4 24

hi guys,

 

Would anyone know how to center the Navigation bar?

 

 

Untitled.png

 

 

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
9825 2237 3078

This is an accepted solution.

Hi

try to change code Sections/header. liquid file
find This code

<nav class="grid__item large--two-thirds large--text-right medium-down--hide" role="navigation">

Replace or add new code

<nav class="grid__item large--two-quarter large--text-left medium-down--hide" role="navigation">

I hope this will work for you.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 8 (8)
dmwwebartisan
Shopify Partner
9825 2237 3078

Hi

 

Please share your webshop URL & password.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
jtan
Trailblazer
155 4 24

hi dmwwebartisan,

 

website: thetinycrate.com.au

 

pw: Jesstan21

dmwwebartisan
Shopify Partner
9825 2237 3078

Hi

 

Please send your header.liquid & theme.scss.liquid file.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
jtan
Trailblazer
155 4 24

hi

 

header liquid 

{%- style -%}
  {%- assign logo_max_width = section.settings.logo_max_width -%}
  {%- assign header_color = section.settings.header_color -%}

  {%- if section.settings.transparent_header_enable and request.page_type == 'index' -%}
    {%- assign header_color_transparent = section.settings.transparent_header_color -%}

    .header-wrapper.header-wrapper--transparent .site-nav__link,
    .header-wrapper.header-wrapper--transparent .site-header__logo a {
      color: {{ header_color_transparent }};
    }

    .header-wrapper.header-wrapper--transparent .site-header__logo a:hover,
    .header-wrapper.header-wrapper--transparent .site-nav__link:hover,
    .header-wrapper.header-wrapper--transparent .site-nav__link:focus,
    .header-wrapper.header-wrapper--transparent .site-header__logo a:focus {
      color: {{ header_color_transparent | color_modify: 'alpha', 0.75 }};
    }

    .header-wrapper.header-wrapper--transparent .site-nav--has-dropdown.nav-hover > .site-nav__link {
      color: {{ header_color }};
    }

    .header-wrapper.header-wrapper--transparent .burger-icon,
    .header-wrapper.header-wrapper--transparent .site-nav__link:hover .burger-icon {
      background: {{ header_color_transparent }};
    }
  {%- endif -%}

  .header-wrapper .site-nav__link,
  .header-wrapper .site-header__logo a,
  .header-wrapper .site-nav__dropdown-link,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a,
  .header-wrapper .site-nav--has-dropdown:hover > a {
    color: {{ header_color }};
  }

  .header-wrapper .site-header__logo a:hover,
  .header-wrapper .site-header__logo a:focus,
  .header-wrapper .site-nav__link:hover,
  .header-wrapper .site-nav__link:focus,
  .header-wrapper .site-nav--has-dropdown a:hover,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:hover,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:focus,
  .header-wrapper .site-nav--has-dropdown .site-nav__link:hover,
  .header-wrapper .site-nav--has-dropdown .site-nav__link:focus,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a:hover,
  .header-wrapper .site-nav__dropdown a:focus {
    color: {{ header_color | color_modify: 'alpha', 0.75 }};
  }

  .header-wrapper .burger-icon,
  .header-wrapper .site-nav--has-dropdown:hover > a:before,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:before,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a:before {
    background: {{ header_color }};
  }

  .header-wrapper .site-nav__link:hover .burger-icon {
    background: {{ header_color | color_modify: 'alpha', 0.75 }};
  }

  .site-header__logo img {
    max-width: {{ logo_max_width | append: 'px' }};
  }

  @media screen and (max-width: 768px) {
    .site-header__logo img {
      max-width: 100%;
    }
  }
{%- endstyle -%}
<div data-section-id="{{ section.id }}" data-section-type="header-section" data-template="{{ request.page_type }}">
  <div id="NavDrawer" class="drawer drawer--left">
    {% include 'drawer-menu' %}
  </div>
  <div class="header-container drawer__header-container">
    <div class="header-wrapper" data-header-wrapper>
      {% if section.settings.show_announcement %}
        {% if section.settings.home_page_only == false or request.page_type == 'index' %}
          <style>
            .announcement-bar {
              background-color: {{ section.settings.color_bg }};
            }

            .announcement-bar--link:hover {
              {% assign brightness = section.settings.color_bg | color_brightness %}

              {% if brightness <= 192 %}
                {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
                background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
              {% else %}
                {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
                background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
              {% endif %}
            }

            .announcement-bar__message {
              color: {{ section.settings.color_text }};
            }
          </style>

          {% if section.settings.link == blank %}
            <div class="announcement-bar">
          {% else %}
            <a href="{{ section.settings.link }}" class="announcement-bar announcement-bar--link">
          {% endif %}

            <p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

          {% if section.settings.link == blank %}
            </div>
          {% else %}
            </a>
          {% endif %}

        {% endif %}
      {% endif %}

      <header class="site-header" role="banner"{% if section.settings.transparent_header_enable %} data-transparent-header="true"{% endif %}>
        <div class="wrapper">
          <div class="grid--full grid--table">
            <div class="grid__item large--hide large--one-sixth one-quarter">
              <div class="site-nav--open site-nav--mobile">
                <button type="button" class="icon-fallback-text site-nav__link site-nav__link--burger js-drawer-open-button-left" aria-controls="NavDrawer">
                  <span class="burger-icon burger-icon--top"></span>
                  <span class="burger-icon burger-icon--mid"></span>
                  <span class="burger-icon burger-icon--bottom"></span>
                  <span class="fallback-text">{{ 'general.drawers.navigation' | t }}</span>
                </button>
              </div>
            </div>
            <div class="grid__item large--one-third medium-down--one-half">
              {% comment %}
                Use the uploaded logo from theme settings if enabled.
                Site name gets precedence with H1 tag on homepage, div on other pages.
              {% endcomment %}
              {% if request.page_type == 'index' %}
                <h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% else %}
                <div class="h1 site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% endif %}
                {% capture image_size %}{{ logo_max_width | escape }}x{% endcapture %}

                <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
                  {% if section.settings.logo %}
                    <img class="site-header__logo-image" src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

                    {% if request.page_type == 'index' and section.settings.transparent_header_enable %}
                      {% if section.settings.transparent_logo == blank %}
                        {%- assign transparent_logo = section.settings.logo -%}
                      {% else %}
                        {%- assign transparent_logo = section.settings.transparent_logo -%}
                      {% endif %}

                      <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ transparent_logo | img_url: image_size }}" srcset="{{ transparent_logo | img_url: image_size }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">
                    {% endif %}
                  {% else %}
                    {{ shop.name }}
                  {% endif %}
                </a>
              {% if request.page_type == 'index' %}
                </h1>
              {% else %}
                </div>
              {% endif %}
            </div>
            <nav class="grid__item large--two-thirds large--text-right medium-down--hide" role="navigation">
              {% comment %}
                List out your main-menu linklist (default)

                More info on linklists:
                  - http://docs.shopify.com/themes/liquid-variables/linklists
              {% endcomment %}
              <!-- begin site-nav -->
              <ul class="site-nav" id="AccessibleNav">
                {% for link in linklists[section.settings.main_menu_link_list].links %}
                  {% if link.links != blank %}
                  {% assign parent_index = forloop.index %}
                    <li
                      class="site-nav__item site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
                      aria-haspopup="true"
                      data-meganav-type="parent">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="parent"
                        aria-controls="MenuParent-{{ parent_index }}"
                        aria-expanded="false"
                        {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                          <span class="icon icon-arrow-down" aria-hidden="true"></span>
                      </a>
                      <ul
                        id="MenuParent-{{ parent_index }}"
                        class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
                        data-meganav-dropdown>
                        {% for childlink in link.links %}
                          {% if childlink.links != blank %}
                          {% assign child_index = forloop.index %}
                            <li
                              class="site-nav__item site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
                              aria-haspopup="true">
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                data-meganav-type="parent"
                                {% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                                  <span class="icon icon-arrow-down" aria-hidden="true"></span>
                              </a>
                              <div class="site-nav__dropdown-grandchild">
                                <ul
                                  id="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                  data-meganav-dropdown>
                                  {% for grandchildlink in childlink.links %}
                                    <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
                                      <a
                                        href="{{ grandchildlink.url }}"
                                        class="site-nav__dropdown-link"
                                        data-meganav-type="child"
                                        {% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
                                        tabindex="-1">
                                          {{ grandchildlink.title | escape }}
                                        </a>
                                    </li>
                                  {% endfor %}
                                </ul>
                              </div>
                            </li>
                          {% else %}
                            <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                data-meganav-type="child"
                                {% if childlink.active %}aria-current="page"{% endif %}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                              </a>
                            </li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                    </li>
                  {% else %}
                    <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="child"
                        {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}

                {% comment %}
                  Remove comment tags below to add a search box to your header, visible on screens where your header menu
                  is displayed inline.
                  <li class="site-nav__item site-nav--search__bar medium-down--hide">
                    {% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--header' %}
                  </li>
                {% endcomment %}
                {% if shop.customer_accounts_enabled %}
                  <li class="site-nav__item site-nav__expanded-item site-nav__item--compressed">
                    <a class="site-nav__link site-nav__link--icon" href="{{ routes.account_url }}">
                      <span class="icon-fallback-text">
                        <span class="icon icon-customer" aria-hidden="true"></span>
                        <span class="fallback-text">
                          {% if customer %}
                            {{ 'layout.customer.account' | t }}
                          {% else %}
                            {{ 'layout.customer.log_in' | t }}
                          {% endif %}
                        </span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                {% if section.settings.search == 'page' or section.settings.search == 'modal' %}
                  {% assign search_modal = true %}
                  {% if section.settings.search == 'page' %}
                    {% assign search_modal = false %}
                  {% endif %}
                  <li class="site-nav__item site-nav__item--compressed">
                    <a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                <li class="site-nav__item site-nav__item--compressed">
                  <a href="{{ routes.cart_url }}" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
                    <span class="icon-fallback-text">
                      <span class="icon icon-cart" aria-hidden="true"></span>
                      <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                    </span>
                    <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                  </a>
                </li>

              </ul>
              <!-- //site-nav -->
            </nav>
            <div class="grid__item large--hide one-quarter">
              <div class="site-nav--mobile text-right">
                <a href="{{ routes.cart_url }}" class="site-nav__link cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
                  <span class="icon-fallback-text">
                    <span class="icon icon-cart" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                  </span>
                  <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                </a>
              </div>
            </div>
          </div>

        </div>
      </header>
    </div>
  </div>
</div>



{% schema %}
{
  "name": {
    "da": "Overskrift",
    "de": "Header",
    "en": "Header",
    "es": "Encabezado",
    "fi": "Ylätunniste",
    "fr": "En-tête",
    "hi": "हैडर",
    "it": "header",
    "ja": "ヘッダー",
    "ko": "헤더",
    "nb": "Header",
    "nl": "Koptekst",
    "pt-BR": "Cabeçalho",
    "pt-PT": "Cabeçalho",
    "sv": "Rubrik",
    "th": "ส่วนหัว",
    "zh-CN": "标头",
    "zh-TW": "標頭"
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": {
        "da": "Logo",
        "de": "Logo",
        "en": "Logo",
        "es": "Logo",
        "fi": "Logo",
        "fr": "Logo",
        "hi": "लोगो",
        "it": "Logo",
        "ja": "ロゴ",
        "ko": "로고",
        "nb": "Logo",
        "nl": "Logo",
        "pt-BR": "Logotipo",
        "pt-PT": "Logótipo",
        "sv": "Logotyp",
        "th": "โลโก้",
        "zh-CN": "logo",
        "zh-TW": "商標"
      }
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "label": {
        "da": "Tilpasset logobredde",
        "de": "Logobreite",
        "en": "Custom logo width",
        "es": "Ancho del logo personalizado",
        "fi": "Mukautetun logon leveys",
        "fr": "Largeur personnalisée du logo",
        "hi": "कस्टम लोगो की चौड़ाई",
        "it": "Larghezza logo personalizzato",
        "ja": "ロゴの幅をカスタマイズする",
        "ko": "사용자 지정 로고 폭",
        "nb": "Tilpasset logobredde",
        "nl": "Aangepaste logo-breedte",
        "pt-BR": "Largura do logotipo personalizado",
        "pt-PT": "Largura de logótipo personalizada",
        "sv": "Anpassad logotypsbredd",
        "th": "ความกว้างของโลโก้ที่กำหนดเอง",
        "zh-CN": "自定义 logo 宽度",
        "zh-TW": "自訂商標寬度"
      },
      "min": 50,
      "max": 260,
      "step": 5,
      "unit": "px",
      "default": 180
    },
    {
      "type": "color",
      "id": "header_color",
      "label": {
        "da": "Links og ikoner",
        "de": "Links und Symbole",
        "en": "Links and icons",
        "es": "Enlaces e íconos",
        "fi": "Linkit ja kuvakkeet",
        "fr": "Liens et icônes",
        "hi": "लिंक और आइकन",
        "it": "Link e icone",
        "ja": "リンクとアイコン",
        "ko": "링크와 아이콘",
        "nb": "Koblinger og ikoner",
        "nl": "Links en pictogrammen",
        "pt-BR": "Links e ícones",
        "pt-PT": "Ligações e ícones",
        "sv": "Länkar och ikoner",
        "th": "ลิงก์และไอคอน",
        "zh-CN": "链接和图标",
        "zh-TW": "連結與圖示"
      },
      "default": "#000000"
    },
    {
      "type": "header",
      "content": {
        "da": "Gennemsigtigt sidehoved",
        "de": "Transparenter Header",
        "en": "Transparent header",
        "es": "Encabezado transparente",
        "fi": "Läpinäkyvä ylätunniste",
        "fr": "En-tête transparent",
        "hi": "पारदर्शी हैडर",
        "it": "Header trasparente",
        "ja": "透過ヘッダー",
        "ko": "투명 헤더",
        "nb": "Gjennomsiktig overskrift",
        "nl": "Transparante koptekst",
        "pt-BR": "Cabeçalho transparente",
        "pt-PT": "Cabeçalho transparente",
        "sv": "Genomskinlig rubrik",
        "th": "ส่วนหัวโปร่งใส",
        "zh-CN": "透明标题",
        "zh-TW": "透明標頭"
      }
    },
    {
      "type": "checkbox",
      "id": "transparent_header_enable",
      "label": {
        "da": "Aktivér gennemsigtigt sidehoved på startsiden",
        "de": "Transparenten Header auf der Startseite aktivieren",
        "en": "Enable transparent header on the homepage",
        "es": "Habilitar encabezado transparente en la página de inicio",
        "fi": "Ota läpinäkyvä ylätunniste käyttöön kotisivulla",
        "fr": "Activer l'en-tête transparent de la page d'accueil",
        "hi": "होमपेज पर पारदर्शी हैडर सक्षम करें",
        "it": "Abilita header trasparente nella home page",
        "ja": "ホームページの透過ヘッダーを有効にする",
        "ko": "홈 페이지에서 투명 헤더를 사용합니다.",
        "nb": "Aktiver gjennomsiktig overskrift på hjemmesiden",
        "nl": "Transparante koptekst inschakelen op de startpagina",
        "pt-BR": "Habilitar cabeçalho transparente na página inicial.",
        "pt-PT": "Ativar cabeçalho transparente na página inicial",
        "sv": "Klicka på aktivera transparent rubrik på startsidan.",
        "th": "เปิดใช้งานส่วนหัวแบบโปร่งใสในหน้าแรก",
        "zh-CN": "在主页上启用透明标题",
        "zh-TW": "啟用首頁上的透明標頭"
      },
      "info": {
        "da": "Gælder, når det øverste afsnit er et diasshow.",
        "de": "Anwendbar, wenn der obere Abschnitt eine Slideshow ist.",
        "en": "Applicable when the top section is a slideshow.",
        "es": "Aplica cuando la sección superior es una presentación de diapositivas.",
        "fi": "Sovelletaan, kun yläosa on diaesitys.",
        "fr": "Applicable lorsque la partie supérieure est un diaporama.",
        "hi": "टॉप सेक्शन के स्लाइडशो होने पर लागू होने योग्य.",
        "it": "Disponibile quando la sezione superiore è una presentazione.",
        "ja": "上部のセクションがスライドショーの場合に適用されます。",
        "ko": "상단 섹션이 슬라이드 쇼인 경우 적용 가능합니다.",
        "nb": "Gjelder når toppseksjonen er en lysbildefremvisning.",
        "nl": "Van toepassing wanneer het bovenste gedeelte een diavoorstelling is.",
        "pt-BR": "Aplicável quando a seção superior é uma apresentação de slides.",
        "pt-PT": "Aplicável quando a secção superior é uma apresentação de diapositivos.",
        "sv": "Tillämplig när det övre avsnittet är ett bildspel.",
        "th": "สามารถใช้งานได้เมื่อส่วนบนเป็นสไลด์โชว์",
        "zh-CN": "在顶部部分是幻灯片时适用。",
        "zh-TW": "可於頂端區段為輪播投影片時套用。"
      },
      "default": true
    },
    {
      "type": "image_picker",
      "id": "transparent_logo",
      "label": {
        "da": "Gennemsigtigt logo",
        "de": "Transparentes Logo",
        "en": "Transparent logo",
        "es": "Logo transparente",
        "fi": "Läpinäkyvä logo",
        "fr": "Logo transparent",
        "hi": "पारदर्शी लोगो",
        "it": "Logo trasparente",
        "ja": "透明なロゴ",
        "ko": "투명 로고",
        "nb": "Gjennomsiktig logo",
        "nl": "Transparant logo",
        "pt-BR": "Logotipo transparente",
        "pt-PT": "Logótipo transparente",
        "sv": "Transparent logotyp",
        "th": "โลโก้โปร่งใส",
        "zh-CN": "透明的 logo",
        "zh-TW": "透明商標"
      },
      "info": {
        "da": "Vises, når det gennemsigtige sidehoved aktiveres.",
        "de": "Wird angezeigt, wenn ein transparenter Header aktiviert ist.",
        "en": "Displayed when transparent header is enabled.",
        "es": "Se muestra cuando el encabezado transparente está habilitado.",
        "fi": "Näytetään silloin, kun läpinäkyvä ylätunniste ei ole käytössä.",
        "fr": "Affiché lorsque l'en-tête transparent est activé.",
        "hi": "पारदर्शी हैडर सक्षम होने पर दिखाई देता है.",
        "it": "Visualizzato quando l'header trasparente è abilitato.",
        "ja": "透明なヘッダーが有効になっている場合に表示されます。",
        "ko": "투명 헤더가 사용 가능한 경우 표시됩니다.",
        "nb": "Vises når gjennomsiktig topptekst er aktivert.",
        "nl": "Weergegeven wanneer transparante kop is ingeschakeld.",
        "pt-BR": "Exibido quando o cabeçalho transparente está habilitado.",
        "pt-PT": "Apresentado quando o cabeçalho transparente é ativado.",
        "sv": "Visas när transparent rubrik är aktiverad.",
        "th": "จะแสดงเมื่อมีการใช้ส่วนหัวแบบโปร่งใส",
        "zh-CN": "在启用透明标题时显示。",
        "zh-TW": "在透明標頭啟用時顯示。"
      }
    },
    {
      "type": "color",
      "id": "transparent_header_color",
      "label": {
        "da": "Links og ikoner til gennemsigtigt sidehoved",
        "de": "Transparente Header-Links und -Symbole",
        "en": "Transparent header links and icons",
        "es": "Enlaces e íconos de encabezado transparentes",
        "fi": "Läpinäkyvän ylätunnisteen linkit ja kuvakkeet",
        "fr": "Liens et icônes d'en-tête transparents",
        "hi": "पारदर्शी हैडर लिंक और आइकन",
        "it": "Link e icone header trasparenti",
        "ja": "透明なヘッダーのリンクとアイコン",
        "ko": "투명 헤더 링크와 아이콘",
        "nb": "Gjennomsiktige topptekstkoblinger og ikoner",
        "nl": "Transparante koptekstkoppelingen en pictogrammen",
        "pt-BR": "Links e ícones de cabeçalho transparentes",
        "pt-PT": "Ligações e ícones de cabeçalho transparentes",
        "sv": "Transparenta rubriklänkar och ikoner",
        "th": "ลิงก์และไอคอนของส่วนหัวแบบโปร่งใส",
        "zh-CN": "透明的标题链接和图标",
        "zh-TW": "透明標頭連結與圖示"
      },
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Navigation"
    },
    {
      "type": "select",
      "id": "search",
      "options": [
        {
          "value": "modal",
          "label": {
            "da": "Modus",
            "de": "Modal",
            "en": "Modal",
            "es": "Modal",
            "fi": "Modaalinen",
            "fr": "Fenêtre modale",
            "hi": "मोडल",
            "it": "Modal",
            "ja": "モーダル",
            "ko": "모달",
            "nb": "Panel",
            "nl": "Modaal venster",
            "pt-BR": "Modal",
            "pt-PT": "Modal",
            "sv": "Modal",
            "th": "โมดอล",
            "zh-CN": "模式",
            "zh-TW": "互動視窗"
          }
        },
        {
          "value": "page",
          "label": {
            "da": "Side",
            "de": "Seite",
            "en": "Page",
            "es": "Página",
            "fi": "Sivu",
            "fr": "Page",
            "hi": "पेज",
            "it": "Pagina",
            "ja": "ページ",
            "ko": "페이지",
            "nb": "Side",
            "nl": "Pagina",
            "pt-BR": "Página",
            "pt-PT": "Página",
            "sv": "Sida",
            "th": "หน้า",
            "zh-CN": "页面",
            "zh-TW": "頁面"
          }
        },
        {
          "value": "none",
          "label": {
            "da": "Ingen",
            "de": "Keine",
            "en": "None",
            "es": "Ninguno",
            "fi": "Ei mitään",
            "fr": "Aucune",
            "hi": "कोई नहीं",
            "it": "Nessuno",
            "ja": "なし",
            "ko": "없음",
            "nb": "Ingen",
            "nl": "Geen",
            "pt-BR": "Nenhum",
            "pt-PT": "Nenhum",
            "sv": "Inga",
            "th": "ไม่มี",
            "zh-CN": "无",
            "zh-TW": "無"
          }
        }
      ],
      "label": {
        "da": "Søgetype",
        "de": "Suchtyp",
        "en": "Search type",
        "es": "Tipo de búsqueda",
        "fi": "Hakutyyppi",
        "fr": "Type de recherche",
        "hi": "खोजें की विधि",
        "it": "Tipo di ricerca",
        "ja": "検索タイプ",
        "ko": "검색 유형",
        "nb": "Søketype",
        "nl": "Zoektype",
        "pt-BR": "Tipo de pesquisa",
        "pt-PT": "Tipo de pesquisa",
        "sv": "Söktyp",
        "th": "ประเภทของการค้นหา",
        "zh-CN": "搜索类型",
        "zh-TW": "搜尋類型"
      }
    },
    {
      "type": "link_list",
      "id": "main_menu_link_list",
      "label": {
        "da": "Menu",
        "de": "Menü",
        "en": "Menu",
        "es": "Menú",
        "fi": "Valikko",
        "fr": "Menu",
        "hi": "मेनू",
        "it": "Menu",
        "ja": "メニュー",
        "ko": "메뉴",
        "nb": "Meny",
        "nl": "Menu",
        "pt-BR": "Menu",
        "pt-PT": "Menu",
        "sv": "Meny",
        "th": "เมนู",
        "zh-CN": "菜单",
        "zh-TW": "選單"
      },
      "default": "main-menu",
      "info": {
        "da": "Menuen komprimeres til en menuknap, hvis linkene er for lange. [Få mere at vide](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "de": "Wenn Links zu lang sind, wird das Menü eingeklappt und als Menü-Schaltfläche angezeigt. [Mehr Informationen](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "en": "The menu will collapse into a menu button if links are too long. [Learn more](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "es": "El menú se contraerá en un botón de menú si los enlaces son demasiado largos. [Más información](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "fi": "Valikko kutistuu valikkopainikkeeksi, jos linkit ovat liian pitkiä. [Lisätietoja](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "fr": "Le menu sera réduit à un bouton de menu si les liens sont trop longs. [En savoir plus](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "hi": "यदि लिंक बहुत लंबे हैं, तो मेनू एक मेनू बटन में संक्षिप्त हो जाएगा. [अधिक जानें](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "it": "Il menu si ridurrà a un pulsante menu se i link sono troppo lunghi. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "ja": "リンクが長すぎる場合、メニューがメニューボタンに折りたたまれます。[詳細情報](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "ko": "링크가 너무 길면 메뉴가 메뉴 버튼으로 축소됩니다. [자세히 알아보기](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "nb": "Menyen slås sammen til en menyknapp hvis koblingene er for lange. [Finn ut mer](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "nl": "Het menu zal inklappen tot een menuknop als de links te lang zijn. [Meer informatie](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "pt-BR": "O menu ficará oculto em um botão de menu se os links forem longos demais. [Saiba mais](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "pt-PT": "O menu será fechado num botão de menu se as ligações forem demasiado compridas. [Saiba mais](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "sv": "Menyn kommer att kollapsa till en menyknapp om länkarna är för långa. [Läs mer](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "th": "เมนูนี้จะย่อลงเป็นปุ่มเมนูในกรณีที่ลิงก์ยาวเกินไป [เรียนรู้เพิ่มเติม](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "zh-CN": "如果链接过长,菜单将折叠成菜单按钮。[了解详细信息](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)",
        "zh-TW": "如果連結太長,選單會收合為選單按鈕。[深入瞭解](https://help.shopify.com/manual/using-themes/themes-by-shopify/brooklyn#navigation-tips-tips-specific)"
      }
    },
    {
      "type": "link_list",
      "id": "drawer_bottom_link_list",
      "label": {
        "da": "Sekundær sidebjælkemenu",
        "de": "Zusätzliches Menü",
        "en": "Secondary sidebar menu",
        "es": "Menú adicional",
        "fi": "Sivupalkkivalikko",
        "fr": "Menu supplémentaire",
        "hi": "माध्यमिक साइडबार मेनू",
        "it": "Menu aggiuntivo",
        "ja": "追加メニュー",
        "ko": "보조 사이드바 메뉴",
        "nb": "Sekundær meny i sidefeltet",
        "nl": "Secundair zijbalkmenu",
        "pt-BR": "Menu adicional",
        "pt-PT": "Menu lateral secundário",
        "sv": "Sekundär sidofältsmeny",
        "th": "เมนูแถบด้านข้างรอง",
        "zh-CN": "辅助侧边栏菜单",
        "zh-TW": "次要側邊欄選單"
      },
      "default": "footer"
    },
    {
      "type": "checkbox",
      "id": "drawer_search_enable",
      "label": {
        "da": "Aktivér søgning",
        "de": "Suche aktivieren",
        "en": "Enable search",
        "es": "Habilitar búsqueda",
        "fi": "Ota hakutoiminto käyttöön",
        "fr": "Activer la recherche",
        "hi": "खोज सक्षम करें",
        "it": "Abilita ricerca",
        "ja": "検索を有効にする",
        "ko": "검색 활성화",
        "nb": "Aktiver søk",
        "nl": "Zoeken inschakelen",
        "pt-BR": "Habilitar pesquisa",
        "pt-PT": "Ativar pesquisa",
        "sv": "Aktivera sökning",
        "th": "เปิดใช้การค้นหา",
        "zh-CN": "启用搜索",
        "zh-TW": "啟用搜索"
      }
    },
    {
      "type": "header",
      "content": {
        "da": "Meddelelseslinje",
        "de": "Ankündigungsleiste",
        "en": "Announcement bar",
        "es": "Barra de anuncios",
        "fi": "Ilmoituspalkki",
        "fr": "Barre d'annonces",
        "hi": "घोषणा बार",
        "it": "Barra degli annunci",
        "ja": "告知バー",
        "ko": "공지 표시줄",
        "nb": "Kunngjøringslinje",
        "nl": "Aankondigingsbalk",
        "pt-BR": "Barra de avisos",
        "pt-PT": "Barra de comunicado",
        "sv": "Meddelandefält",
        "th": "แถบประกาศ",
        "zh-CN": "公告栏",
        "zh-TW": "公告列"
      }
    },
    {
      "type": "checkbox",
      "id": "show_announcement",
      "label": {
        "da": "Vis meddelelse",
        "de": "Ankündigung anzeigen",
        "en": "Show announcement",
        "es": "Mostrar anuncio",
        "fi": "Näytä ilmoitus",
        "fr": "Afficher l'annonce",
        "hi": "घोषणा दिखाएं",
        "it": "Mostra annuncio",
        "ja": "告知を表示する",
        "ko": "공지 표시",
        "nb": "Vis kunngjøring",
        "nl": "Aankondiging weergeven",
        "pt-BR": "Exibir anúncio",
        "pt-PT": "Mostrar comunicado",
        "sv": "Visa tillkännagivande",
        "th": "แสดงประกาศ",
        "zh-CN": "显示公告",
        "zh-TW": "顯示公告"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "home_page_only",
      "label": {
        "da": "Kun startside",
        "de": "Nur Startseite",
        "en": "Home page only",
        "es": "Solo página de inicio",
        "fi": "Vain etusivu",
        "fr": "Page d'accueil uniquement",
        "hi": "केवल होमपेज",
        "it": "Solo home page",
        "ja": "ホームページのみ",
        "ko": "홈페이지만",
        "nb": "Kun på startsiden",
        "nl": "Alleen homepage",
        "pt-BR": "Apenas na página inicial",
        "pt-PT": "Apenas a página inicial",
        "sv": "Endast hemsida",
        "th": "หน้าแรกเท่านั้น",
        "zh-CN": "仅主页",
        "zh-TW": "僅限首頁"
      },
      "default": true
    },
    {
      "type": "text",
      "id": "text",
      "label": {
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "texto",
        "fi": "Teksti",
        "fr": "Texte",
        "hi": "टेक्स्ट",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": {
        "da": "Meddel noget her",
        "de": "Hier Ankündigung platzieren",
        "en": "Announce something here",
        "es": "Anuncia algo aquí",
        "fi": "Ilmoita jotakin tässä",
        "fr": "Annoncer quelque chose ici",
        "hi": "यहां कुछ घोषित करें",
        "it": "Annuncia qualcosa qui",
        "ja": "ここで告知してください",
        "ko": "여기에 공지하십시오",
        "nb": "Kunngjør noe her",
        "nl": "Kondig hier iets aan",
        "pt-BR": "Anuncie algo aqui",
        "pt-PT": "Anunciar algo aqui",
        "sv": "Meddela något här",
        "th": "ประกาศข้อความที่นี่",
        "zh-CN": "在此处进行公告",
        "zh-TW": "在此公告資訊"
      }
    },
    {
      "type": "url",
      "id": "link",
      "label": {
        "da": "Link",
        "de": "Link",
        "en": "Link",
        "es": "Enlace",
        "fi": "Linkki",
        "fr": "Lien",
        "hi": "लिंक",
        "it": "Link",
        "ja": "リンク",
        "ko": "링크",
        "nb": "Kobling",
        "nl": "Link",
        "pt-BR": "Link",
        "pt-PT": "Ligação",
        "sv": "Länk",
        "th": "ลิงก์",
        "zh-CN": "链接",
        "zh-TW": "連結"
      }
    },
    {
      "type": "color",
      "id": "color_bg",
      "label": {
        "da": "Bjælke",
        "de": "Leiste",
        "en": "Bar",
        "es": "Barra",
        "fi": "Palkki",
        "fr": "Barre",
        "hi": "बार",
        "it": "Barra",
        "ja": "バー",
        "ko": "바",
        "nb": "Felt",
        "nl": "Balk",
        "pt-BR": "Barra",
        "pt-PT": "Barra",
        "sv": "Fält",
        "th": "แถบ",
        "zh-CN": "栏",
        "zh-TW": "橫條"
      },
      "default": "#1c1d1d"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": {
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "texto",
        "fi": "Teksti",
        "fr": "Texte",
        "hi": "टेक्स्ट",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": "#ffffff"
    }
  ]
}
{% endschema %}
jtan
Trailblazer
155 4 24

theme..scss.lquid

 

/*============================================================================
  Brooklyn by Shopify
==============================================================================*/

/*================ Variables, theme settings, and Sass mixins from Timber ================*/
/*============================================================================
  #Sass Mixins
==============================================================================*/
.clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin clearfix() {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

/*============================================================================
  Prefix mixin for generating vendor prefixes.
  Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
  Usage:
    // Input:
    .element {
      @include prefix(transform, scale(1), ms webkit spec);
    }
    // Output:
    .element {
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
==============================================================================*/
@mixin prefixFlex($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      -webkit-#{$property}: $value;
    } @else if $prefix == moz {
      -moz-#{$property}: $value;
    } @else if $prefix == ms {
      -ms-#{$property}: $value;
    } @else if $prefix == o {
      -o-#{$property}: $value;
    } @else if $prefix == spec {
      #{$property}: $value;
    } @else  {
      @warn 'Unrecognized prefix: #{$prefix}';
    }
  }
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@mixin transition($transition: 0.1s all) {
  @include prefix('transition', #{$transition});
}

@mixin transform($transform: 0.1s all) {
  @include prefix('transform', #{$transform});
}

@mixin animation($animation) {
  -webkit-animation: $animation;
  -moz-animation:    $animation;
  -o-animation:      $animation;
  animation:         $animation;
}

@mixin gradient($from, $to, $fallback) {
  background: $fallback;
  background: -moz-linear-gradient(top, $from 0%, $to 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
  background: -webkit-linear-gradient(top, $from 0%, $to 100%);
  background: -o-linear-gradient(top, $from 0%, $to 100%);
  background: -ms-linear-gradient(top, $from 0%, $to 100%);
  background: linear-gradient(top bottom, $from 0%, $to 100%);
}

@mixin backface($visibility: hidden) {
  @include prefix('backface-visibility', #{$visibility});
}

@mixin box-sizing($box-sizing: border-box) {
  -webkit-box-sizing: #{$box-sizing};
  -moz-box-sizing: #{$box-sizing};
  box-sizing: #{$box-sizing};
}

/*================ Functions ================*/
@function em($target, $context: $baseFontSize) {
  @if $target == 0 {
    @return 0;
  }
  @return $target / $context + 0em;
}

@function color-control($color) {
  @if (lightness( $color ) > 40) {
    @return #1c1d1d;
  }
  @else {
    @return #fff;
  }
}

@function adaptive-color($color, $percentage) {
  @if (lightness( $color ) > 40) {
    @return darken($color, $percentage);
  }
  @else {
    @return lighten($color, $percentage);
  }
}

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

//Font Stack Mixins
@mixin headerFontStack {
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
}

@mixin accentFontStack {
  font-family: $accentFontStack;
  font-weight: $accentFontWeight;
  font-style: $accentFontStyle;
  {% if settings.type_accent_spacing %}
    letter-spacing: 0.1em;
  {% endif %}
  {% if settings.type_accent_transform %}
    text-transform: uppercase;
  {% endif %}
}

@mixin bodyFontItalic {
  {% if settings.type_base_italize_titles %}
    font-style: italic;
  {% endif %}
}

@mixin visuallyHidden {
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

/*================ Animations and keyframes ================*/
@include keyframes(spin) {
  0% {
    @include transform(rotate(0deg));
  }

  100% {
    @include transform(rotate(360deg));
  }
}

@include keyframes(fadeIn) {
  0%, 35% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@include keyframes(heroContentIn) {
  0%, 35% {
    opacity: 0;
    @include transform('translateY(8px)');
  }
  60% {
    opacity: 1;
  }
  100% {
    @include transform('translateY(0)');
  }
}

/*============================================================================
  Dependency-free breakpoint mixin
    - http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
==============================================================================*/
$min: min-width;
$max: max-width;
@mixin at-query ($constraint, $viewport1, $viewport2:null) {
  @if $constraint == $min {
    @media screen and ($min: $viewport1) {
      @content;
    }
  } @else if $constraint == $max {
    @media screen and ($max: $viewport1) {
      @content;
    }
  } @else {
    @media screen and ($min: $viewport1) and ($max: $viewport2) {
      @content;
    }
  }
}

/*============================================================================
  Flexbox prefix mixins from Bourbon
    https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss
==============================================================================*/
@mixin display-flexbox() {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%; // necessary for ie10
}

@mixin flex-wrap($value: nowrap) {
  @include prefixFlex(flex-wrap, $value, webkit moz ms spec);
}

@mixin flex-direction($value) {
  @include prefixFlex(flex-direction, $value, webkit moz ms spec);
}

@mixin align-items($value: stretch) {
  $alt-value: $value;

  @if $value == 'flex-start' {
    $alt-value: start;
  } @else if $value == 'flex-end' {
    $alt-value: end;
  }

  // sass-lint:disable no-misspelled-properties
  -ms-flex-align: $alt-value;
  @include prefixFlex(align-items, $value, webkit moz ms o spec);
}

@mixin flex($value) {
  @include prefixFlex(flex, $value, webkit moz ms spec);
}

@mixin flex-basis($width: auto) {
  // sass-lint:disable no-misspelled-properties
  -ms-flex-preferred-size: $width;
  @include prefixFlex(flex-basis, $width, webkit moz spec);
}

@mixin align-self($align: auto) {
  // sass-lint:disable no-misspelled-properties
  -ms-flex-item-align: $align;
  @include prefixFlex(align-self, $align, webkit spec);
}

@mixin justify-content($justify: flex-start) {
  @include prefixFlex(justify-content, $justify, webkit ms spec);
}

$viewportIncrement: 1px;
$siteWidth: 1350px;
$small: 590px;
$medium: 768px;
$large: 769px;
$xlarge: $siteWidth + $viewportIncrement;

$postSmall: $small + $viewportIncrement;
$preMedium: $medium - $viewportIncrement;
$preLarge: $large - $viewportIncrement;

/*================ The following are dependencies of csswizardry grid ================*/
$breakpoints: (
  'small' '(max-width: #{$small})',
  'medium' '(min-width: #{$postSmall}) and (max-width: #{$medium})',
  'medium-down' '(max-width: #{$medium})',
  'large' '(min-width: #{$large})',
  'xlarge' '(min-width: #{$xlarge})'
);
$breakpoint-has-widths: ('small', 'medium', 'medium-down', 'large', 'xlarge');
$breakpoint-has-push:  ('medium', 'medium-down', 'large');
$breakpoint-has-pull:  ('medium', 'medium-down', 'large');

/*================ Color variables ================*/
$colorPrimary: {{ settings.color_primary }};
$colorSecondary: {{ settings.color_secondary }};

// Button colors
$colorBtnPrimary: $colorPrimary;
$colorBtnPrimaryHover: lighten($colorBtnPrimary, 12%);
$colorBtnPrimaryActive: adaptive-color($colorPrimary, 24%);
$colorBtnPrimaryText: {{ settings.color_button_text }};

$colorBtnSecondary: $colorSecondary;
$colorBtnSecondaryHover: lighten($colorBtnSecondary, 10%);
$colorBtnSecondaryActive: adaptive-color($colorSecondary, 10%);
$colorBtnSecondaryText: {{ settings.color_button_text }};

$colorBtnSecondaryAccent: $colorBtnPrimary;
$colorBtnSecondaryAccentHover: lighten($colorBtnSecondaryAccent, 12%);
$colorBtnSecondaryAccentActive: adaptive-color($colorBtnSecondaryAccent, 24%);

// Text link colors
$colorLink: $colorSecondary;
$colorLinkHover: $colorPrimary;

// Text colors
$colorTextBody: {{ settings.color_body_text }};

// Heading colors
$colorHeadings: {{ settings.color_headings }};

// Backgrounds
$colorBody: {{ settings.color_body_bg }};
$colorProductBackground: {{ settings.color_product_background }};
$colorInputBg: {{ settings.color_input }};
$colorNewsletter: {{ settings.color_newsletter }};

// Border colors
$colorBorder: {{ settings.color_borders }};

// Border size
$borderWidthHeader: {{ settings.type_header_border_thickness }};

// Sale tag color
$colorSaleTag: {{ settings.color_sale_tag }};

// Nav and dropdown link background
$colorNav: $colorBody;
$colorNavText: $colorHeadings;

// Helper colors
$disabledGrey: #f6f6f6;
$disabledBorder: darken($disabledGrey, 25%);
$errorRed: #d02e2e;
$errorRedBg: #fff6f6;
$successGreen: #56ad6a;
$successGreenBg: #ecfef0;

// Drawer sizes and colors
$drawerNavWidth: 300px;
$drawerCartWidth: 300px;
$drawerCartWidthLarge: 400px; // small-up width
$drawerHeaderHeight: 80px;
$drawerCartFooterHeight: 130px; // default, overwritten by JS
$colorDrawers: {{ settings.color_drawer_background }};
$colorDrawerBorder: {{ settings.color_drawer_border }};
$colorDrawerText: {{ settings.color_drawer_text }};
$colorDrawerButton: {{ settings.color_drawer_button }};
$colorDrawerButtonText: {{ settings.color_drawer_button_text }};
$drawerTransition: 'all 0.35s cubic-bezier(0.46, 0.01 , 0.32, 1)';

// Sizing variables
$gutter: 30px;
$gridGutterMobile: 22px;
$section-spacing-small: 35px;
$gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it
$contentTopMargin: 80px;
$contentTopMarginSmall: 35px;
$radius: 0;
$customSelectHeight: 46px;

// Footer spacing
$footer-spacing-small: $gutter / 2;
$footer-spacing-extra-small: $gutter / 4;

// Z-index
$zindexNavDropdowns: 5;
$zindexDrawer: 10;
$zindexHeroHeader: 2;
$zindexDrawerOverlay: 20;

// Product Collage Grid
$collageImageXLarge: 670px;
$collageImageLarge: 500px;
$collageImageMedium: 310px;
$collageImageSmall: 230px;

{% if settings.product_vendor_enable %}
  $collageImageLarge: 544px;
{% endif %}

// Collection Collage Grid
// These heights are used to determine the row height for the
// collection grid.
$collectionCollageRowHeightFull: 440px;
$collectionCollageRowHeightLarge: 440px;
$collectionCollageRowHeightSmall: 350px;

// Password page
$passwordPageUseBgImage: true;

// Section onboarding
$color-blankstate: rgba($colorTextBody, 0.35);
$color-blankstate-background: rgba($colorTextBody, 0.10);

/*================ Typography ================*/
{%- assign accent_family = settings.type_accent_family -%}
{%- assign base_family = settings.type_base_family -%}
{%- assign header_family = settings.type_header_family -%}

{{ accent_family | font_face }}
{{ base_family | font_face }}
{{ header_family | font_face }}

{%- assign base_family_bold = base_family | font_modify: 'weight', 'bolder' -%}
{%- assign base_family_italic = base_family | font_modify: 'style', 'italic' -%}
{%- assign base_family_bold_italic = base_family_bold | font_modify: 'style', 'italic' -%}
{%- assign accent_family_bold = accent_family | font_modify: 'weight', 'bolder' -%}

{{ base_family_bold | font_face }}
{{ base_family_italic | font_face }}
{{ base_family_bold_italic | font_face }}
{{ accent_family_bold | font_face }}

// Header Font
$headerFontStack: {{ header_family.family }}, {{ header_family.fallback_families }};
$headerFontWeight: {{ header_family.weight }};
$headerFontStyle: {{ header_family.style }};
$headerBaseFontSize: {{ settings.type_header_base_size }};

// Body Font
$bodyFontStack: {{ base_family.family }}, {{ base_family.fallback_families }};
$bodyFontWeight: {{ base_family.weight }};
$bodyFontWeightBold: {{ base_family_bold.weight | default: 700 }};
$bodyFontStyle: {{ base_family.style }};
$baseFontSize: {{ settings.type_base_size }}; // Henceforth known as 1em

// Accent Font
$accentFontStack: {{ accent_family.family }}, {{ accent_family.fallback_families }};
$accentFontWeight: {{ accent_family.weight }};
$accentFontWeightBold: {{ accent_family_bold.weight | default: 700 }};
$accentFontStyle: {{ accent_family.style }};

@font-face {
  font-family: 'icons';
  src: url('{{ "icons.eot" | asset_url }}');
  src: url('{{ "icons.eot" | asset_url }}#iefix') format("embedded-opentype"),
       url('{{ "icons.woff" | asset_url }}') format("woff"),
       url('{{ "icons.ttf" | asset_url }}') format("truetype"),
       url('{{ "icons.svg" | asset_url }}#timber-icons') format("svg");
  font-weight: normal;
  font-style: normal;
};

$socialIconFontStack: 'icons';


/*================ Vendor-specific styles ================*/
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  filter: alpha(opacity=65);
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  filter: alpha(opacity=65);
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after, .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; }
 }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }

  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }

  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }

  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; }
 }

.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }


/*================ Theme-specific partials ================*/
/*================ Theme specific global styles ================*/
hr {
  border-width: $borderWidthHeader 0 0 0;
  width: 50px;
}

.hr--small {
  @extend hr;
  margin: 20px auto;
}

.hr--medium {
  @extend hr;
  margin: 35px auto;

  @include at-query($min, $large) {
    margin: 45px auto;
  }
}

.hr--large {
  @extend hr;
  margin: ($gutter * 2) auto;
}

.hr--left {
  margin-left: 0;
  margin-right: 0;
}

/*================ Table styles ================*/
table {
  position: relative;
  border: 0 none;
  background-color: $colorNewsletter;
}

td,
th {
  border: 0 none;
}

td {
  padding: 10px 15px;
}

tr:first-child th,
tr:first-child td {
  position: relative;

  &:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: -15px;
    right: 15px;
    border-bottom: 1px solid $colorBorder;
  }

  &:first-child:after {
    left: 15px;
    right: -15px;
  }
}

/*============================================================================
  Responsive tables, defined with .table--responsive on table element.
==============================================================================*/
  .table--responsive {
    @include at-query($max, $small) {
      thead {
        display: none;
      }

      tr {
        display: block;
      }

      th,
      td {
        display: block;
        text-align: right;
        padding: 15px;
      }

      td:before {
        content: attr(data-label);
        float: left;
        @include accentFontStack;
        font-size: 12px;
        padding-right: 10px;
      }
    }
  }

  @include at-query($max, $small) {
    .table--small-hide {
      display: none !important;
    }

    .table__section + .table__section {
      position: relative;
      margin-top: 10px;
      padding-top: 15px;

      &:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        border-bottom: 1px solid $colorBorder;
      }
    }
  }


/*================ Partials | Theme typography overrides ================*/
body,
input,
textarea,
button,
select {
  line-height: 1.563; // 25px based on 16px font
}

h1 {
  font-size: em($headerBaseFontSize);
}

h2 {
  font-size: em(floor($headerBaseFontSize * 0.93));
}

h3 {
  font-size: em(floor($headerBaseFontSize * 0.77));
}

h4 {
  font-size: em(floor($headerBaseFontSize * 0.65));
}

h5 {
  font-size: em(floor($headerBaseFontSize * 0.56));
}

h6 {
  font-size: em(floor($headerBaseFontSize * 0.51));
}

{% if settings.type_accent_subheadings %}
  h3, h4, h5, h6 {
    @include accentFontStack;
  }
{% endif %}

.h1 { @extend h1; }
.h2 { @extend h2; }
.h3 { @extend h3; }
.h4 { @extend h4; }
.h5 { @extend h5; }
.h6 { @extend h6; }

/*================ Tables ================*/
th,
.table__title {
  @include accentFontStack;
  font-size: em(13px);
  letter-spacing: 0.15em;
}

/*================ Rich Text Editor Styles ================*/
.rte {
  h1 {
    text-align: center;
  }

  h2 {
    text-align: center;
  }

  // emulate separator line (<hr>) under rte headings
  h1::after, h2::after {
    content: '';
    display: block;
    margin: 20px auto;
    border-bottom: 1px {{ settings.color_borders }} solid;
    max-width: 50px;
  }

  h3 {
    {% if settings.type_accent_subheadings %}
      @include accentFontStack;
    {% endif %}
    text-align: center;
  }

  h4, h5, h6 {
    {% if settings.type_accent_subheadings %}
      @include accentFontStack;
    {% endif %}
  }
}

blockquote {
  @include bodyFontItalic;
  font-size: em(23px);
  line-height: 1.385;
  text-align: center;

  @include at-query($min, $postSmall) {
    font-size: em(26px);
  }
}

.section-header .rte {
  @include bodyFontItalic;
  font-size: em(18px);
}

/*================ Blog and Page Typography ================*/
.article .rte,
.page .rte {
  h2,
  h3 {
    margin-bottom: 2em;
  }
}

/*================ Blog Typography ================*/
.date {
  @include bodyFontItalic;
  display: inline-block;
  line-height: 1.7;
  margin-bottom: 5px;

  @include at-query($min, $large) {
    margin-bottom: 0;
  }

  .section-header &:last-child {
    margin-bottom: 40px;
  }
}

.comment-author {
  @include bodyFontItalic;
  margin-bottom: 0;
}

.comment-date {
  @include accentFontStack;
  font-size: em(12px);
}

/*================ Cart Typography ================*/
.ajaxcart__product-name,
.cart__product-name {
  @include bodyFontItalic;
}

.ajaxcart__product-name {
  font-size: em(17px);
  line-height: 1.3;
}

.ajaxcart__price,
.cart__price,
.cart__subtotal {
  @include accentFontStack;
}

.cart__unit-price {
  display: block;
}

.ajaxcart__price {
  font-size: em(13px);
  display: block;
}

.ajaxcart__discount {
  display: block;
  @include bodyFontItalic;
}

.ajaxcart__subtotal {
  @include accentFontStack;
}

.ajaxcart__qty-num[type="text"] {
  @include accentFontStack;
  font-style: normal;
  font-size: em(13px);
}

.ajaxcart__note {
  @include bodyFontItalic;
  font-weight: $bodyFontWeight;
  opacity: 0.7;
}

.ajaxcart__policies {
  font-weight: $bodyFontWeight;
  opacity: 0.7;
}

.ajaxcart__policies a {
  border-bottom: 1px solid $colorDrawerText;

  &:hover {
    border-bottom: none;
  }
}

/*================ Misc typography ================*/
.drawer__title {
  @include headerFontStack;
  font-size: em(24px);
}

.collection-grid__item-title {
  @include bodyFontItalic;
  font-size: em(26px);
  line-height: 1.1;

  @include at-query($min, $postSmall) {
    font-size: em(34px);
  }
}

/*================ Partials | Theme Form Overrides ================*/
label {
  @include bodyFontItalic;
  font-weight: $bodyFontWeight;
}

::-webkit-input-placeholder {
  color: $colorTextBody;
  opacity: 0.6;
}

:-moz-placeholder {
  color: $colorTextBody;
  opacity: 0.6;
}

:-ms-input-placeholder {
  color: $colorTextBody;
  opacity: 0.6;
}

::-ms-input-placeholder {
  color: $colorTextBody;
  opacity: 1;
}

input,
textarea,
select {
  @include bodyFontItalic;
  font-size: em(18px);
  border-color: transparent;
  background-color: $colorInputBg;
  color: color-control($colorInputBg);
  @include transition(opacity 0.4s ease-out);

  &[disabled],
  &.disabled {
    background-color: $disabledGrey;
    border-color: transparent;
  }

  &:hover {
    @include transition(opacity 0.15s ease-out);
    opacity: 0.9;
  }

  &:active,
  &:focus {
    opacity: 1;
  }
}

select:hover {
  outline: 1px solid darken($colorInputBg, 10%);
}

input[type="number"] {
  @include accentFontStack;
  font-size: em(16px);
}

input[type="image"] {
  background-color: transparent;
}

/*================ Ajax quantity selectors ================*/
.js-qty {
  background-color: $colorInputBg;
  color: color-control($colorInputBg);
}

.js-qty__adjust {
  &:hover {
    background-color: darken($colorInputBg, 5%);
    color: color-control($colorInputBg);
  }
}

.js-qty__adjust--minus,
.js-qty__adjust--plus {
  border-color: darken($colorInputBg, 5%);
  color: color-control($colorInputBg);
}

/*================ Newsletter area ================*/
.newsletter {
  background-color: $colorNewsletter;
  padding: $gutter 0;

  @include at-query($min, $postSmall) {
    padding: ($gutter * 2) 0;
  }

  .section-header {
    @include at-query($max, $small) {
      margin-bottom: 20px;
    }
  }

  .section-header + .section-subheading {
    margin-bottom: 20px;

    @include at-query($min, $postSmall) {
      margin-top: -50px;
      margin-bottom: 50px;
    }
  }

  .rte p {
    @include at-query($max, $small) {
      margin-bottom: $gridGutterMobile;
    }
  }

  form {
    margin: 0 auto;
    max-width: 520px;

    .newsletter--form {
      padding: $gutter / 3;
    }
    .note,
    .errors {
      margin-bottom: 0;
    }
  }

  form .newsletter--form,
  .newsletter__input {
    background-color: $colorBody;
    color: $colorTextBody;
  }

  .newsletter__input {
    font-size: em(18px);
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;

    &::-webkit-input-placeholder {
      /* WebKit browsers */
      color: $colorTextBody;
      opacity: 1;
    }

    &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: $colorTextBody;
      opacity: 1;
    }

    &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: $colorTextBody;
      opacity: 1;
    }

    &:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: $colorTextBody;
    }

    &::-ms-input-placeholder {
      /* Microsoft Edge 12+ */
      color: $colorTextBody;
      opacity: 1;
    }

    @include at-query($min, $postSmall) {
      font-size: em(21px);
    }
  }

  .newsletter__submit-text--large {
    white-space: nowrap;
  }
}

@include at-query($max, $small) {
  .newsletter__submit-text--large,
  .password-page__login-form__submit-text--large {
    display: none;
  }

  .newsletter__submit-text--small,
  .password-page__login-form__submit-text--small {
    display: block;
  }
}

@include at-query($min, $postSmall) {
  .newsletter__submit-text--large,
  .password-page__login-form__submit-text--large {
    display: block;
  }

  .newsletter__submit-text--small,
  .password-page__login-form__submit-text--small {
    display: none;
  }
}

.newsletter__label {
  padding-left: 10px;
}

/*================ Modules | Theme product collage grid ================*/
.grid__row-separator {
  clear: both;
  width: 100%;
}

.grid-collage {
  margin-bottom: -13px; // matches bottom padding of .grid-product__meta
}

@include at-query($max, $small) {
  .grid-collage {
    .grid-product__image-link {
      height: $collageImageMedium;
    }
  }
}

.grid-collage .grid-product__image-link {
  vertical-align: middle;
  display: table-cell;
}

@include at-query($min, $postSmall) {
  .large--two-thirds.reverse {
    float: right;
  }

  .grid-collage {
    .large--two-thirds {
      clear: both;

      &.reverse {
        clear: none;
      }
    }

    // specificity necessary to override timber defaults
    .grid__item.large--one-third {
      clear: none;
    }

    .large--one-half {
      float: left;
      display: inline-block;
    }
  }

  .grid-collage .large--one-third {
    clear: inherit;
  }

  .grid-collage .grid-product__image-link {
    height: $collageImageXLarge;
  }

  .grid-collage .large--one-half .grid-product__image-link {
    height: $collageImageMedium;
  }

  .grid-collage .large--two-thirds .grid-product__image-link {
    height: $collageImageLarge;
  }

  .grid-collage .large--one-third .grid-product__image-link {
    height: $collageImageSmall;
  }

}

/*================ Modules | Theme collection collage grid ================*/
.collection-grid {
  margin-bottom: -($gutter / 2);

  @include at-query($min, $postSmall) {
    margin-bottom: -$gutter;
  }
}

.collection-collage__item {
  position: relative;
  margin-bottom: $gutter / 2;
  height: $collectionCollageRowHeightFull;

  @include at-query($max, $small) {
    // calculate height for single item rows for
    // mobile breakpoint only
    &.one-whole {
      height: $collectionCollageRowHeightLarge - 120px;
    }

    // calculate height for single item rows
    // mobile breakpoint only
    &.one-half {
      height: $collectionCollageRowHeightSmall - 150px;
    }
  }

  @include at-query($min, $postSmall) {
    margin-bottom: $gutter;
  }
}

@include at-query($min, $postSmall) {
  .collection-collage__item {
    &.large--one-half {
      height: $collectionCollageRowHeightLarge;
    }

    &.large--one-third {
      height: $collectionCollageRowHeightSmall;
    }
  }
}

/*================ Partials | Theme button overrides ================*/
a {
  color: $colorTextBody;
  text-decoration: none;
  background: transparent;

  &:hover {
    color: $colorTextBody;
  }
}

.rte a,
.text-link {
  color: $colorLink;

  &:hover {
    color: $colorLinkHover;
  }
}

.return-link {
  @include accentFontStack;
  font-size: em(14px);
}

/*================ Buttons and Input Groups ================*/
.btn,
.btn--secondary {
  @include accentFontStack;
  padding: 12px 20px;
  font-size: em(13px);
}

.input-group .btn,
.input-group .btn--secondary,
.input-group .input-group-field {
  height: 45px;
}

/*================ Button loading indicator, when supported ================*/
.supports-csstransforms .btn--loading {
  position: relative;

  background-color: darken($colorBtnPrimary, 5%);
  color: darken($colorBtnPrimary, 5%);

  &:hover,
  &:active {
    background-color: darken($colorBtnPrimary, 5%);
    color: darken($colorBtnPrimary, 5%);
  }

  &:after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
    border-radius: 50%;
    border: 3px solid $colorBtnPrimaryText;
    border-top-color: transparent;
    @include animation(spin 1s infinite linear);
  }
}

/*================ Partials | Theme drawer overrides ================*/

/*================ Override drawer scrolling to accommodate fixed header/footers ================*/
.drawer {
  overflow: hidden;
}

.drawer__inner {
  position: absolute;
  top: $drawerHeaderHeight;
  bottom: 0;
  left: 0;
  right: 0;
  padding: ($gutter / 2) ($gutter / 2) 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  @include at-query($min, $large) {
    padding-left: $gutter;
    padding-right: $gutter;
  }

  .drawer--has-fixed-footer & {
    overflow: hidden;
  }
}

.drawer-left__inner {
  top: 0;
  padding-top: 26px;
}

/*================ Drawer Fixed Headers ================*/
.drawer__fixed-header {
  position: absolute;
  top: 0;
  left: $gutter / 2;
  right: $gutter / 2;
  height: $drawerHeaderHeight;
  overflow: visible; // for close button hit area

  @include at-query($min, $large) {
    left: $gutter;
    right: $gutter;
  }
}

.drawer__header {
  padding: ($gutter / 2) 0;
  margin: 0;
}

@include at-query($max, $medium) {
  .drawer__close-button {
    .icon {
      font-size: em(22px);
    }
  }
}

@include at-query($min, $postSmall) {
  .drawer__close-button {
    right: 0;
  }
}

@include at-query($min, $xlarge) {
  .drawer__close-button {
    right: -20px;
  }
}

/*================ Drawer Fixed Cart Footer ================*/
.ajaxcart__inner--has-fixed-footer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: ($gutter / 2) ($gutter / 2) 0;
  bottom: $drawerCartFooterHeight; // overwritten with JS
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  @include at-query($min, $large) {
    padding: $gutter $gutter 0;
  }
}

.ajaxcart__footer {
  border-top: 1px solid $colorDrawerBorder;
  padding-top: $gutter / 2;
}

.ajaxcart__footer--fixed {
  position: absolute;
  bottom: 0;
  left: $gutter / 2;
  right: $gutter / 2;
  min-height: $drawerCartFooterHeight; // overwritten by JS
  padding-bottom: $gutter;

  @include at-query ($max, $small) {
    padding-bottom: $gutter /2;
  }

  @include at-query($min, $large) {
    left: $gutter;
    right: $gutter;
  }
}

.ajaxcart__discounts {
  margin-bottom: $gutter / 2;
}

/*================ Drawer Quantity Selectors ================*/
.ajaxcart__qty {
  max-width: 75px;

  input[type='text'] {
    padding: 0 20px;
  }

  .js-qty__adjust,
  .ajaxcart__qty-adjust {
    padding: 0 5px;
    line-height: 1;
  }
}

/*================ Cart item styles ================*/
.ajaxcart__product:last-child .ajaxcart__row {
  border-bottom: 0 none;
  padding-bottom: 0;
}

.btn--secondary {
  @include transition(all 0.2s ease-out);

  &:hover {
    background-color: adaptive-color($colorDrawerButton, 10%);
  }
}

/*============================================================================
  Social Icon Buttons v1.0
  Author:
    Carson Shold | @cshold
    http://www.carsonshold.com
  MIT License
==============================================================================*/

/*================ Social share buttons ================*/
$shareButtonHeight: 22px;
$shareButtonCleanHeight: 30px;
$shareCountBg: $colorBody;

.social-sharing {
  font-family: $bodyFontStack;
  font-weight: $bodyFontWeight;
  font-style: $bodyFontStyle;

  * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }

  a {
    display: inline-block;
    color: $colorTextBody;
    border-radius: 2px;
    margin: 5px 0;
    height: $shareButtonHeight;
    line-height: $shareButtonHeight;
    text-decoration: none;
    font-weight: $bodyFontWeight;
  }

  span {
    display: inline-block;
    vertical-align: top;
    height: $shareButtonHeight;
    line-height: $shareButtonHeight;
    font-size: 12px;
  }

  .icon {
    padding: 0 5px 0 10px;

    &:before {
      line-height: $shareButtonHeight;
    }
  }

  /*================ Large Buttons ================*/
  &.is-large a {
    height: $shareButtonHeight*2;
    line-height: $shareButtonHeight*2;

    span {
      height: $shareButtonHeight*2;
      line-height: $shareButtonHeight*2;
      font-size: 18px;
    }

    .icon {
      padding: 0 10px 0 18px;

      &:before {
        line-height: $shareButtonHeight*2;
      }
    }
  }
}

.share-title {
  font-size: em(18px);
  padding-right: 10px;

  .is-large & {
    padding-right: 16px;
  }
}

/*================ Clean Buttons ================*/
.social-sharing.clean {
  a {
    background-color: $shareCountBg;
    color: $colorTextBody;
    height: $shareButtonCleanHeight;
    line-height: $shareButtonCleanHeight;

    span {
      height: $shareButtonCleanHeight;
      line-height: $shareButtonCleanHeight;
      font-size: 13px;
    }

    &:hover {
      opacity: 0.8;
    }

    &:hover .share-count {
      opacity: 0.8;

      &:after {
        border-right-color: $shareCountBg;
      }
    }

    .share-title {
      font-weight: $bodyFontWeight;
    }
  }

  .share-count {
    top: -1px;
  }
}

/*================ Partials | Theme search grid ================*/

.grid-search {
  margin-bottom: $gutter;
}

.grid-search__product {
  position: relative;
  text-align: center;
}

// Force heights for consistency
.grid-search__page-link,
.grid-search__product-link {
  @include at-query($min, $large) {
    height: 280px;
  }
}

.grid-search__page-link {
  display: block;
  background-color: $colorProductBackground;
  padding: 20px;
  color: $colorTextBody;
  overflow: hidden;

  &:hover,
  &:focus {
    background-color: adaptive-color($colorProductBackground, 3%);
  }
}

.grid-search__page-content {
  display: block;
  height: 100%;
  overflow: hidden;
}

.grid-search__image {
  display: block;
  padding: 20px;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;

  @include at-query($min, $large) {
    position: absolute;
    top: 50%;
    left: 50%;
    @include prefix('transform', 'translate(-50%, -50%)');
  }
}

/*================ Partials | Sections ================*/
.index-sections {
  .shopify-section:first-child {
    margin: 0;

    &:not(.shopify-section--full-width) {
      margin-top: 110px;
    }
  }

  .shopify-section {
    margin-top: $gutter * 3;

    @include at-query($max, $medium) {
      margin-top: $gutter * 1.5;
    }
  }
}

.index-slideshow-section,
.shopify-section--full-width {
  & + .shopify-section--full-width {
    margin-top: 0;
  }
}

/*================ Partials | Sections onboarding ================*/
.placeholder-svg {
  fill: $color-blankstate;
  background-color: $color-blankstate-background;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.placeholder-background {
  background-color: $color-blankstate-background;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  .hero & {
    background-color: transparent;
  }

  .placeholder-svg {
    fill: $color-blankstate-background;
    background-color: transparent;
  }
}

.hero__slide {
  &.slide--placeholder {
    background-color: $color-blankstate-background !important;
  }
}

/*================ Partials | Featured products section onboarding ================*/
.grid-product__image-link {
  .helper-section &,
  .helper & {
    background-color: transparent;
  }
}

.grid-product__image-wrapper {
  .helper-section & {
    height: 275px !important;
  }
}

/*================ Partials | Featured row section ================*/
.feature-row {
  @include display-flexbox();
  @include justify-content(space-between);
  @include align-items(center);

  @include at-query($max, $medium) {
    @include flex-wrap(wrap);
  }
}

.feature-row__item {
  @include flex(0 1 50%);

  @include at-query($max, $medium) {
    @include flex(1 1 100%);
    max-width: 100%;
  }
}

.feature-row__image-wrapper {
  position: relative;

  .no-js & {
    @include visuallyHidden();
    padding-top: 0 !important;
  }
}

.feature-row__image-no-js {
  display: block;
  margin: 0 auto;

  @include at-query($max, $medium) {
    order: 1;
  }
}

.feature-row__image {
  display: block;
  margin: 0 auto;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  @include at-query($max, $medium) {
    order: 1;
  }
}

.feature-row__text {
  padding-top: $section-spacing-small;
  padding-bottom: $section-spacing-small;

  @include at-query($max, $medium) {
    order: 2;
    padding-bottom: 0; // always last element on mobile
  }
}

@include at-query($min, $large) {
  .feature-row__text--left {
    padding-left: $section-spacing-small;
  }

  .feature-row__text--right {
    padding-right: $section-spacing-small;
  }
}


/*================ Module-specific styles ================*/
/*============================================================================
  To update Slick slider to a new version,
  scroll down to #Slick Slider SCSS and follow the instructions

  Default Slick classes all start with '.slick'
  Custom classes all start with '.hero'

  Extra specificity in selectors is used to override default
  styles before including the default Slick CSS
==============================================================================*/

/*================ Variables ================*/
$slideshow-control-size: 3.125rem;
$slideshow-indicator-size: 1.25rem;

/*================ Prev/next and pagination ================*/
.slick-slider .slick-dots {
  margin: 0;
  bottom: 10px;

  li {
    margin: 0;
    vertical-align: middle;

    button {
      position: relative;
    }

    button:before,
    a:before {
      text-indent: -9999px;
      border-radius: 100%;
      // Colors are set in slideshow.liquid. This is just the default color.
      background-color: #ffffff;
      border: 2px solid transparent;
      width: 10px;
      height: 10px;
      margin: 0.3rem 0 0 0.3rem;
      opacity: 1;
      @include transition(all 0.2s);
    }

    &.slick-active button:before {
      // Colors are set in slideshow.liquid. This is just the default color.
      background-color: transparent;
      border-color: #ffffff;
      opacity: 1;
      width: 0.75rem;
      height: 0.75rem;
      margin: 0.25rem 0 0 0.25rem;
    }

    button:active:before {
      opacity: 0.5;
    }
  }
}

.hero {
  .slick-prev,
  .slick-next {
    height: $slideshow-control-size;
    margin-top: 0;
    width: $slideshow-control-size;
  }

  .slick-prev {
    left: 1.1rem;
  }

  .slick-next {
    right: 1.45rem;
    @media only screen and ($max: $siteWidth) {
      right: 1rem;
    }
  }
}

/*============================================================================
  General slide styles
    - Sizes based on height of image when 100% of container width
==============================================================================*/
.hero__slide {
  position: relative;
}

.hero__image {
  position: relative;
  opacity: 0;

  .slick-initialized & {
    opacity: 1;
    @include animation(fadeIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87));
  }

  img {
    display: block;
    width: 100%;
  }
}

// The overlay color and opacity is set in slideshow.liquid
.slideshow__overlay:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.hero__slide--hidden {
  visibility: hidden;
}

.supports-touch .hero__slide--hidden {
  visibility: visible;
}


/*============================================================================
  Full screen hero styles
    - Uses css background image
==============================================================================*/
.hero {
  // Height is set by JS on slider init. vh is a nice default for modern browsers.
  height: 100vh;
  max-height: 100vh;

  &.slick-slider {
    margin-bottom: 0;
  }

  @include at-query($max, $siteWidth) {
    min-height: 50vw;
  }

  .slick-list,
  .slick-track {
    height: 100%;

    @include at-query($max, $siteWidth) {
      min-height: 50vw;
    }
  }

  .hero__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    // Used for the IE lazysizes object-fit polyfill
    font-family: "object-fit: cover";
  }
}

.hero[data-adapt="false"],
.hero[data-adapt="false"] .slideshow__overlay:before {
  height: 100vh;
}

.hero[data-adapt="true"] .slideshow__overlay:before {
  @include at-query($max, $siteWidth) {
    min-height: 50vw;
  }
}

.hero[data-adapt="false"],
.hero[data-adapt="false"] .slideshow__overlay:before {
  height: 100vh;
}

.hero[data-adapt="true"] .slideshow__overlay:before {
  @include at-query($max, $siteWidth) {
    min-height: 50vw;
  }
}

.hero__image {
  .no-js & {
    @include visuallyHidden;
  }
}

.hero__image-no-js {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  height: 100vh;
  min-height: 550px;
  opacity: 1;
}

/*================ Hero text/CTA ================*/
.hero__text-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.hero__slide:not(:first-of-type) .hero__text-wrap {
  display: none;

  .slick-initialized & {
    display: block;
  }
}

.hero__text-align {
  display: table;
  width: 100%;
  height: 100%;

  .hero--adapt & {
    @include at-query($max, $medium) {
      display: none;
    }
  }
}

.hero__text-content {
  position: relative;
  opacity: 0;
  display: table-cell;
  vertical-align: middle;
  padding: 0.94rem 0.6rem 0;
  @include transition('color 0.2s ease');

  @include at-query($max, $medium) {
    padding: 0;
  }

  .slick-initialized & {
    opacity: 1;
    @include animation(heroContentIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87));
  }
}

.hero__text-content .slick-dots {
  position: static;
}

.hero__adapt-text-wrap {
  margin-bottom: 1rem;
  margin-top: 1.5rem;

  @include at-query($min, $large) {
    display: none !important;
  }

  @include at-query($max, $medium) {
    color: $colorHeadings;
  }

  .hero__text-content {
    display: none;
  }
}

.hero__text-content--adapt {
  opacity: 1;
}

/*================ Extra specificity to override Timber defaults ================*/
.hero__slide,
.hero--adapt {
  .hero__title {
    margin-bottom: 1.25rem;
    line-height: 1.25;
    letter-spacing: 0;
  }

  .hero__subtitle {
    {% if settings.type_accent_subheadings %}
      @include accentFontStack;
    {% else %}
      @include headerFontStack;
    {% endif %}
    margin-bottom: 0.94rem;
  }

  a.hero__cta {
    margin-bottom: 0;
  }
}

/*================ Font sizes ================*/
.hero__slide,
.hero--adapt {
  .hero__title {
    font-size: em(50px);
  }

  .hero__subtitle {
    font-size: em(20px);
  }

  @include at-query($min, $postSmall) {
    .hero__title {
      font-size: em(60px);
    }

    .hero__subtitle {
      font-size: em(18px);
    }
  }

  @include at-query($min, $large) {
    .hero__title {
      font-size: em(64px);
    }
  }
}

/*================ Hero header ================*/
.header-wrapper--transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  z-index: $zindexHeroHeader;
}

.template-index .header-wrapper {
  opacity: 0;
  z-index: $zindexHeroHeader;
  @include animation(fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87) forwards);

  .supports-no-cssanimations & {
    opacity: 1;
    @include animation(fadeIn 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87));
  }
}

.header-container {
  position: relative;
  z-index: $zindexHeroHeader;
}

/*============================================================================
  #Slick Slider overrides
    - If upgrading Slick's styles, use the following variables/functions
      instead of the slick defaults
    - Only overwrite slick's default styles starting at #Slick Slider SCSS
==============================================================================*/
$slick-font-family: "slick-icons, sans-serif";
$slick-arrow-color: $colorPrimary;
$slick-dot-color: $colorPrimary;
$slick-dot-color-active: $slick-dot-color;
$slick-prev-character: '\2190';
$slick-next-character: '\2192';
$slick-dot-character: '\2022';

// Only called once so make sure proper file is grabbed
@function slick-image-url($url) {
  @return url({{ "ajax-loader.gif" | asset_url }});
}

// Unused intentionally
@function slick-font-url($url) {}

/*============================================================================
  #Slick Slider SCSS
    - Everything below this line is unchanged from Slick's scss file
    - When updating to a new version, don't include the variables/function
      that were modified above
==============================================================================*/
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 1.875rem;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;

  .slick-loading & {
    background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
  }

  &.dragging {
    cursor: pointer;
    cursor: hand;
  }
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  max-height: 100vh;
  position: relative;
  left: 0;
  top: 0;
  display: block;

  &:before,
  &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }

  .slick-loading & {
    visibility: hidden;
  }
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  [dir="rtl"] & {
    float: right;
  }
  img {
    display: block;
  }
  &.slick-loading img {
    display: none;
  }

  display: none;

  &.dragging img {
    pointer-events: none;
  }

  .slick-initialized & {
    display: block;
  }

  .slick-loading & {
    visibility: hidden;
  }

  .slick-vertical & {
    display: block;
    height: auto;
    border: 1px solid transparent;
  }
}

/* Icons */
@if $slick-font-family == "slick" {
  @font-face {
    font-family:"slick";
    src:  slick-font-url("slick.eot");
    src:  slick-font-url("slick.eot?#iefix") format("embedded-opentype"),
        slick-font-url("slick.woff") format("woff"),
        slick-font-url("slick.ttf") format("truetype"),
        slick-font-url("slick.svg#slick") format("svg");
    font-weight: normal;
    font-style: normal;
  }
}

/* Arrows */

.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  width: 0.6rem;
  line-height: 0;
  cursor: pointer;

  padding: 0;
  border: none;

  & .icon:before {
    bottom: 0;
  }
}

.slick-prev .icon:before,
.slick-next .icon:before {
  position: relative;
  transition: top 0.1s linear;
  font-size: 0.6rem;
  color: $slick-arrow-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-prev:hover .icon:before,
.slick-next:hover .icon:before {
  top: -0.125rem;
}

/* Dots */
.slick-dots {
  position: absolute;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  width: 100%;

  li {
    position: relative;
    display: inline-block;
    height: $slideshow-indicator-size;
    width: $slideshow-indicator-size;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;

    &.slick-active button:before {
      color: $slick-dot-color-active;
    }
  }

  button,
  a {
    border: 0;
    background: transparent;
    display: block;
    height: $slideshow-indicator-size;
    width: $slideshow-indicator-size;
    line-height: 0;
    font-size: 0;
    color: transparent;
    cursor: pointer;

    &:before {
      position: absolute;
      top: 0;
      left: 0;
      content: $slick-dot-character;
      width: $slideshow-indicator-size;
      height: $slideshow-indicator-size;
      font-family: $slick-font-family;
      font-size: 0.375rem;
      line-height: $slideshow-indicator-size;
      text-align: center;
      color: $slick-dot-color;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
}

.hero .slick-dots {
  margin: 0 auto;
  bottom: 0.9rem;
  width: 8rem;
  left: 0;
  right: 0;

  a:hover {
    &:before {
      top: -0.125rem;
    }
  }
}

.hero__controls {
  width: 100%;
  height: $slideshow-control-size;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  li {
    margin-bottom: 0;
    list-style: none;
  }
}

.hero__pause {
  position: absolute;
  right: 4.5rem;
  transition: bottom 0.1s linear;
  bottom: 0;
  height: $slideshow-control-size;
  width: $slideshow-control-size;
  font-size: 0.6rem;
  line-height: 0.6rem;

  &:hover {
    bottom: 0.125rem;
  }

  & .icon {
    height: 0.4rem;
  }
}

.icon-pause {
  display: block;

  .is-paused & {
    display: none;
  }
}

.icon-play {
  display: none;

  .is-paused & {
    display: block;
  }
}

/*================ Module | Collection images at top of templates ================*/
.collection-hero {
  margin-top: -$contentTopMarginSmall;
  margin-bottom: $contentTopMarginSmall;
  overflow: hidden;

  @include at-query($min, $large) {
    margin-top: -$contentTopMargin + ($gutter / 2);
    margin-bottom: $contentTopMargin;
  }

  @include at-query($max, $medium) {
    margin-bottom: $gutter * 2;
  }
}

.collection-hero__image-wrapper {
  position: relative;

  .no-js & {
    @include visuallyHidden;
  }
}

.collection-hero__image-wrapper:after {
  padding-bottom: 70%;
  content: '';
  display: block;
  height: 0;
  width: 100%;

  @include at-query($min, $large) {
    padding-bottom: 45%;
  }
}

.collection-hero__image {
  position: absolute;
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  // Used for the IE lazysizes object-fit polyfill
  font-family: "object-fit: cover";
  opacity: 0;

  &.is-init {
    opacity: 1;
    @include animation(fadeIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87));
  }
}

.collection-hero__image-no-js {
  padding-bottom: 70%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 1;

  @include at-query($min, $large) {
    padding-bottom: 45%;
  }
}

.filter-dropdown__label {
  margin-right: 0.3em;
}
/*================ Module | Theme Header and Navigation Overrides ================*/
@include at-query($max, $medium) {
  .site-header {
    padding: 0;

    .grid--table {
      height: $drawerHeaderHeight;
    }
  }
}

.site-header__logo .logo--inverted {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  height: 0;

  .is-light & {
    opacity: 1;
    visibility: visible;
    height: auto;
  }
}

/*================ Text Shop Name ================*/
.site-header__logo {
  font-size: em(20px);

  @include at-query($min, $large) {
    text-align: left;
    font-size: em(25px);
  }

  @include at-query($max, $medium) {
    img {
      max-height: $drawerHeaderHeight - ($gutter / 2); // account for border-box height
      margin-top: $gutter / 3;
      margin-bottom: $gutter / 3;
    }
  }
}

.site-header__logo a,
.header-logo a {
  @include transition(color 0.2s);
  @include accentFontStack;
}

/*================ Nav Links ================*/
.site-nav,
.site-nav--open {
  white-space: nowrap;
  opacity: 0;

  .no-js &,
  &.site-nav--init {
    opacity: 1;
    @include transition("color 0.2s, opacity 0.1s");
  }
}

.burger-icon {
  display: block;
  height: 2px;
  width: 18px;
  left: 25px;
  margin-left: -9px;
  position: absolute;
  transition: all 0.25s ease-out;
  background: $colorNavText;

  .js-drawer-open-left & {
    width: 24px;
    top: calc(50% - 1px);
    left: calc(50% - 4px);
  }

  @include at-query($min, $large) {
    width: 20px;
    left: 27px;
    margin-left: -12px;

    .js-drawer-open-left & {
      width: 25px;
      top: calc(50% - 1px);
      left: calc(50% - 2px);
    }
  }
}

.burger-icon--top {
  top: 17px;

  .js-drawer-open-left & {
    top: 25px;
    @include transform(rotate(45deg));
  }
}

.burger-icon--mid {
  top: 24px;

  .js-drawer-open-left & {
    opacity: 0;
  }
}

.burger-icon--bottom {
  top: 31px;

  .js-drawer-open-left & {
    top: 25px;
    @include transform(rotate(-45deg));
  }
}

.site-nav__link--burger {
  width: 50px;
  height: 50px;
  padding: 0;
  text-align: center;
  line-height: 50px;
  background-color: transparent;
  border: 0;
  position: relative;
  top: 4px;
  transition: transform 0.15s ease-out;

  svg {
    width: 20px;
    height: 30px;
  }

  &::after {
    border-color: #000;
  }
}

.site-nav__item {
  white-space: normal;
}

.site-nav__link {
  @include accentFontStack;
  @include transition(color 0.2s);
  font-size: em(14px);
}

.site-nav--has-dropdown {
  > a {
    position: relative;
    z-index: $zindexNavDropdowns + 1;
  }

  &:hover > a,
  > a.nav-focus,
  &.nav-hover > a {
    color: $colorNavText;
    background-color: $colorNav;
    opacity: 1;
    @include transition(none);

    &:before {
      content: "";
      position: absolute;
      left: $gutter / 2;
      right: $gutter;
      bottom: 0;
      display: block;
      background-color: $colorNavText;
      height: 1px;
      z-index: $zindexNavDropdowns + 1;
    }
  }

  &.site-nav--has-dropdown-grandchild {
    a:before {
      display: none;
    }
  }
}

/*================ Dropdown Animation ================*/
.site-nav__dropdown {
  background-color: $colorNav;
  min-width: 100%;
  padding: ($gutter / 3) 0;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.09);
  @include transform(translate3d(0px, -12px, 0px));

  .supports-no-touch .site-nav--has-dropdown:hover &,
  .site-nav--has-dropdown.nav-hover &,
  .nav-focus + & {
    opacity: 1;
    pointer-events: auto;
    @include transform(translate3d(0px, 0px, 0px));
  }

  .supports-no-touch .site-nav--has-dropdown:hover &,
  .site-nav--has-dropdown.nav-hover & {
    @include transition("transform 300ms cubic-bezier(0.2, .06, .05, .95)");
  }
}

.site-nav__dropdown-grandchild {
  min-width: 100%;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.09);
  @include transform(translate3d(-12px, 0px, 0px));

  .nav-outside + & {
    @include transform(translate3d(12px, 0px, 0px));
  }

  .supports-no-touch .site-nav--has-dropdown-grandchild:hover &,
  .site-nav--has-dropdown-grandchild.nav-hover &,
  .nav-focus + & {
    opacity: 1;
    pointer-events: initial;
    @include transform(translate3d(0px, 0px, 0px));
  }

  .supports-no-touch .site-nav--has-dropdown-grandchild:hover &,
  .site-nav--has-dropdown-grandchild.nav-hover & {
    @include transition("transform 300ms cubic-bezier(0.2, .06, .05, .95)");
  }
}

/*================ Submenu items ================*/
.site-nav__dropdown a,
.site-nav__grandchild-dropdown a {
  background-color: transparent;

  &:hover,
  &:active,
  &:focus {
    background-color: transparent;
  }
}

.site-nav__dropdown-link {
  @include bodyFontItalic;
  display: block;
  white-space: nowrap;
  padding: 5px 15px;
  font-size: em(16px);
  .site-nav--has-grandchildren & {
    padding-right: $gutter * 1.5;
  }
}

/*================ Compressed nav if too many links ================*/
.site-nav--compress {
  .site-nav__item:not(.site-nav__item--compressed) {
    display: none;
  }
}

.site-nav--open {
  @include at-query($min, $large) {
    display: none;
  }

  &.site-nav--open__display {
    display: inline-block;
  }
}

/*================ Search bar ================*/
.site-nav--search__bar {
  vertical-align: middle;
  padding: 0 10px 7px 0;

  input {
    background-color: $colorInputBg;
  }
}

/*================ Module | Theme Tags ================*/
.tags {
  a {
    padding: 4px ($gutter / 2);
    @include accentFontStack;
    font-size: em(13px);
    letter-spacing: 0.15em;
  }
}

.tags--collection {
  max-width: 75%;
  margin: 0 auto 25px;

  @include at-query($min, $large) {
    li {
      display: inline-block;
    }
  }

  @include at-query($max, $small) {
    li {
      display: block;
    }
  }

}

.tags--article {
  a {
    padding-right: $gutter / 2;
    padding-left: 0;
  }
}

.tags__title {
  margin-right: $gutter / 2;
}

.tag--active {
  a {
    color: $colorSecondary;
  }
}

.single-option-radio {
  border: 0;
  padding-top: 0;
  position: relative;
  background-color: $colorBody;

  input {
    @include visuallyHidden;
  }

  label {
    @include accentFontStack;
    position: relative;
    display: inline-block;
    line-height: 1;
    padding: 9px 11px;
    margin: 3px 4px 7px 3px;
    font-size: em(13px);
    font-style: normal;
    background-color: $colorBody;
    border: 1px solid $colorBody;
    color: $colorHeadings;

    &.disabled:before {
      position: absolute;
      content: "";
      left: 50%;
      top: 0;
      bottom: 0;
      border-left: 1px solid;
      border-color: $colorTextBody;
      @include transform(rotate(45deg));
    }

    &:active,
    &:focus {
      background-color: adaptive-color($colorBody, 5%);
      border-color: adaptive-color($colorBody, 5%);
    }
  }

  //style selected radio button's label
  input[type='radio']:checked + label {
    border-color: $colorHeadings;
  }

  //style label on input focus
  input[type='radio']:focus + label {
    background-color: adaptive-color($colorBody, 5%);
  }
}

.radio-wrapper .single-option-radio__label {
  display: block;
  margin-bottom: 10px;
  cursor: default;
  font-style: normal;
}

.product-form__item{
  margin-bottom: 13px;
}

/*================ Module | Product Lightbox ================*/

.mfp-bg {
  background-color: $colorBody;

  &.mfp-fade {
    -webkit-backface-visibility: hidden;
    opacity: 0;
    @include transition(all 0.3s ease-out);

    //background opacity after load
    &.mfp-ready {
      opacity: 1;
      filter: alpha(opacity=100);
    }

    &.mfp-removing {
      @include transition(all 0.3s ease-out);
      opacity: 0;
      filter: alpha(opacity=0);
    }
  }
}

.mfp-fade {
  &.mfp-wrap {
    .mfp-content {
      opacity: 0;
      @include transition(all 0.3s ease-out);
    }

    &.mfp-ready {
      .mfp-content {
        opacity: 1;
      }
    }

    &.mfp-removing {
      @include transition(all 0.3s ease-out);
      .mfp-content {
        opacity: 0;
      }

      button {
        opacity: 0;
      }
    }
  }
}

.mfp-counter {
  display: none;
}

.mfp-figure {
  .mfp-gallery .mfp-image-holder & {
    cursor: zoom-out;
  }

  &:after {
    background-color: $colorProductBackground;
    box-shadow: none;
  }
}

.mfp-img {
  background-color: $colorProductBackground;
}

button.mfp-close {
  margin: 30px;
  font-size: em(40px);
  font-weight: 300px;
  opacity: 1;
  filter: alpha(opacity=100);
  color: $colorTextBody;
}

button.mfp-arrow {
  top: 0;
  height: 100%;
  width: 20%;
  margin: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 1045;

  &:after,
  & .mfp-a {
    display: none;
  }

  &:before,
  & .mfp-b {
    display: none;
  }

  &:active {
    margin-top: 0;
  }
}

.mfp-chevron {
  position: absolute;
  pointer-events: none;

  &:before {
    content: '';
    display: inline-block;
    position: relative;
    vertical-align: top;
    height: 25px;
    width: 25px;
    border-style: solid;
    border-width: 4px 4px 0 0;
    @include transform(rotate(-45deg));
  }

  &.mfp-chevron-right {
    right: 55px;

    &:before {
      @include transform(rotate(45deg));
    }
  }

  &.mfp-chevron-left {
    left: 55px;

    &:before {
      @include transform(rotate(-135deg));
    }
  }
}

.grid-product__wrapper {
  text-align: center;
  margin-bottom: $gutter;

  .grid-collage & {
    margin-bottom: 0;
  }
}

.grid-product__image-wrapper {
  position: relative;
  width: 100%;
  display: table;
  table-layout: fixed;
}

.grid-product__image-link {
  position: relative;
  display: block;
  width: 100%;
  background-color: $colorProductBackground;
  @include transition(opacity 0.4s ease-out);

  .grid-collage & {
    padding: 0 20px;
  }

  &:hover,
  &:focus {
    opacity: 0.9;
    @include transition(opacity 0.15s ease-in);
  }

  .grid-uniform & {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
  }
}

.grid-product__image-link--loading {
  background-color: $colorTextBody;
  @include animation(placeholder-background-loading 1.5s infinite linear);
}

.grid-product__image {
  display: block;
  margin: 0 auto;
}

@include at-query($max, $small) {
  .grid-uniform {
    .grid-product__image-wrapper {
      height: auto !important;
    }
  }
}

.grid-collage {
  .grid-product__image {
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    padding: 20px;
    @include prefix('transform', 'translate(-50%, -50%)');
    @include backface();
  }
}

.product--wrapper {
  margin: 0 auto;
  position: relative;
  width: 100%;

  @include at-query($max, $small) {
    margin: 20px auto;
  }
}

.product--image {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;

  &.lazyload {
    opacity: 0;
  }

  .is-sold-out & {
    opacity: 0.5;
  }
}

.grid-product__meta {
  position: relative;
  display: block;
  padding: 13px 0;
}

.grid-product__price-wrap {
  white-space: nowrap;
}

.long-dash {
  margin: 0 4px;
}

.grid-product__title {
  @include bodyFontItalic;
  font-size: em(floor($baseFontSize * 1.25));  //20px based on 16px base font size
}

.grid-product__vendor {
  @include accentFontStack;
  letter-spacing: 0.2em;
  font-size: em(11px);
  margin: 1px 0;
}

.grid-product__price {
  @include accentFontStack;
  font-size: em(14px);
}

.grid-product__price-min {
  position: relative;
  top: -1px;
  font-size: em(10px);
  margin-left: -4px;
}

.grid-product__sold-out,
.grid-product__on-sale {
  @include accentFontStack;
  font-size: em(11px);
  line-height: 1.3;
  position: absolute;
  min-width: 50px;
  border-radius: 25px;
  top: -8px;
  left: -8px;

  p {
    padding: 12px 8px 10px 9px;
    margin: 0;
    letter-spacing: 1px;
  }

  sup {
    display: none;
  }
}

.grid-product__sold-out {
  color: $colorTextBody;
  border: 1px solid $colorTextBody;

}

.grid-product__on-sale {
  color: $colorSaleTag;
  border: 1px solid $colorSaleTag;
}

@include keyframes(placeholder-background-loading) {
  0% {
    opacity: 0.02;
  }

   50% {
    opacity: 0.05;
  }

   100% {
    opacity: 0.02;
  }
}

/*================ Product Carousel ================*/

.product-single__media-group-wrapper {
  .product-single__media-group:not(.slick-initialized) {
    & ~ .slick__controls {
      display: none;
    }
  }

  .slick__controls {
    margin-top: 25px;
    margin-bottom: 0;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
  }

  .slick__dots-wrapper {
    max-width: 180px;
    padding: 5px 0;
    overflow: hidden;
  }

  .slick-dots {
    background-color: $colorBody;
    bottom: 0;
    position: relative;
    display: flex;
    transition: all 0.25s;
    transform: translateX(0);

    li {
      margin: 0;
    }
  }

  .slick__arrow {
    padding: 15px;
    display: flex;
    z-index: 1;
    line-height: 1.9;

    .icon {
      font-size: 0.6rem;
      width: 14px;
      height: 14px;
    }

    &.slick-disabled {
      opacity: 0.3;
    }
  }

  .slick__arrow--next {
    order: 1;
  }

  .slick__arrow--previous {
    order: -1;
  }

  .slick-dots li a {
    position: relative;

    &:before {
      background-color: transparent;
      border-color: $colorTextBody;
      width: 10px;
      height: 10px;
    }
  }

  .slick-dots li.slick-active a {
    &:before {
      background-color: $colorTextBody;
      border-color: $colorTextBody;
      opacity: 1;
      width: 10px;
      height: 10px;
      margin-top: 0.3rem;
      margin-left: 0.3rem;
    }
  }
}

.product-recommendations {
  margin-top: $gutter * 3;

  @include at-query($max, $medium) {
    margin-top: $gutter * 1.5;
  }
}

/*================ Rich text section ================*/
.rich-text {
  .section-header {
    margin-bottom: $gutter / 2.5;
  }
}

.rich-text__heading--large {
  font-size: em(floor($headerBaseFontSize * 1.2));
}
.rich-text__heading--small {
  font-size: em(floor($headerBaseFontSize * 0.8));
}

.rich-text__text--large {
  font-size: em(floor($baseFontSize * 1.2));
}
.rich-text__text--small {
  font-size: em(floor($baseFontSize * 0.925));
}

/*================ Modules | Theme collection grid item ================*/
.collection-collage__item {
  overflow: hidden;
}

.collection-collage__item-wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;

  .collection-grid__item-overlay {
    position: relative;
    @include transition(all 1.4s ease);

    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0.25;
      background-color: #000;
      @include transition(all 1.4s ease);
    }

    &:hover,
    &:focus {
      @include transform(scale(1.03));

      &:after {
        opacity: 0.5;
      }
    }
  }
}

.collection-grid__item-link {
  display: block;
  width: 100%;
  height: 100%;
}

.collection-grid__item-overlay {
  display: block;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.collection-grid__item-title--wrapper {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  display: table;
  table-layout: fixed;
  color: #fff;
  cursor: pointer;

  .collection-grid__item-title {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
  }
}

.custom-content {
  @include display-flexbox;
  @include align-items(stretch);
  @include flex-wrap(wrap);
  width: auto;
  margin-bottom: -$gridGutter;
  margin-left: -$gridGutter;

  @include at-query($max, $small) {
    margin-bottom: -$gridGutterMobile;
    margin-left: -$gridGutterMobile;
  }
}

.custom__item {
  @include flex(0 0 auto);
  margin-bottom: $gridGutter;
  padding-left: $gridGutter;
  max-width: 100%;

  @include at-query($max, $small) {
    @include flex(0 0 auto);
    padding-left: $gridGutterMobile;
    margin-bottom: $gridGutterMobile;

    &.small--one-half {
      @include flex(1 0 50%);
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.custom__item-inner {
  position: relative;
  display: inline-block;
  text-align: left;
  max-width: 100%;
}

.custom__item-inner--video,
.custom__item-inner--html {
  display: block;
}

/*================ Flex item alignment ================*/
.align--top-middle {
  text-align: center;
}

.align--top-right {
  text-align: right;
}

.align--middle-left {
  @include align-self(center);
}

.align--center {
  @include align-self(center);
  text-align: center;
}

.align--middle-right {
  @include align-self(center);
  text-align: right;
}

.align--bottom-left {
  @include align-self(flex-end);
}

.align--bottom-middle {
  @include align-self(flex-end);
  text-align: center;
}

.align--bottom-right {
  @include align-self(flex-end);
  text-align: right;
}

.featured-blog__post,
.featured-blog__meta,
.title--one-post {
  margin-bottom: $gridGutter * 1.75;

  @include at-query($max, $small) {
    margin-bottom: $gridGutterMobile * 1.75;
  }
}

.featured-blog__author {
  display: inline-block;
  font-style: italic;
  line-height: 1.7;

  &:after {
    content: '\2022';
    margin: 0 5px;
  }
}

.featured-blog__date {
  display: inline-block;
}

.article__heading-link {
  color: $colorHeadings;
}

.map-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: $gutter * 3 0;
  @include display-flexbox();
  @include align-items(center);
  @include flex-wrap(wrap);
  @include flex-direction(row);

  @include at-query($max, $medium) {
    min-height: auto;
    padding: 0 $gutter;
    margin-top: $gutter * 1.5;
  }

  @include at-query($max, $small) {
    padding: 0 $gutter * 0.5;
  }
}

.map-section__wrapper {
  height: 100%;
  flex-shrink: 0;
  flex-grow: 1;
  @include flex-basis(100%);
  @include display-flexbox();
  @include flex-wrap(wrap);
  @include flex-direction(row);

  @include at-query($max, $medium) {
    padding: 0;
  }
}

.map-section--load-error {
  height: auto;
}

.map-section__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
}

.map-section__error {
  position: relative;
  z-index: 3;

  @include at-query($max, $medium) {
    position: absolute;
    margin: 0 2rem;
    top: 50%;
    @include transform(translateY(-50%));
  }
}

.map-section__content-wrapper {
  position: relative;
  text-align: center;
  height: 100%;
  @include display-flexbox();
  flex-grow: 0;
}

.map-section__content {
  position: relative;
  display: inline-block;
  background-color: $colorBody;
  padding: $section-spacing-small;
  width: 100%;
  text-align: center;
  z-index: 3;
  @include display-flexbox();
  @include align-items(center);
  @include flex-wrap(wrap);
  min-height: 350px;

  // Make sure every children is on one line
  & > * {
    width: 100%;
  }

  @include at-query($max, $medium) {
    background-color: $colorNewsletter;
    min-height: auto;
    display: block;
  }

  .map-section--load-error & {
    position: static;
    transform: translateY(0);
  }
}

.map-section__link {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  max-width: none;
  width: 100%;
  height: 100%;
  z-index: 2;
  @include transform(translateX(-50%));
}

// Optically center map in visible area with
// extended height/widths and negative margins
.map-section__container {
  position: absolute;
  height: 100%;
  min-height: auto;
  left: 0;
  top: 0;
  // map is centered on resize, larger widths allow pin to be off-center
  width: 130%;

  @include at-query($max, $medium) {
    position: relative;
    max-width: $siteWidth;
    width: 100%;
    height: 55vh;
  }

}

.map_section__directions-btn {
  [class^="icon"] {
    height: 1em;
  }

  * {
    vertical-align: middle;
  }
}

.map-section__background-wrapper {
  @include flex-basis(100%);
  flex-grow: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  @include at-query($max, $medium) {
    overflow: hidden;
    position: relative;
    @include flex-basis(100%);
  }

  .map-section--onboarding & {
    min-height: 350px;
  }

  .placeholder-background {
    height: 100%;
  }

  .js {
    .no-js & {
      @include visuallyHidden();
    }
  }
}

.map-section__image {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  @include at-query($max, $medium) {
    position: relative;
  }

  // Only show the background image if map fails to load
  .map-section--display-map & {
    display: none !important;
  }

 .map-section--load-error & {
    display: block !important;
  }
}

// Hide Google maps UI
.gm-style-cc,
.gm-style-cc + div {
  visibility: hidden;
}

.flex--third {
  @include flex-basis(33%);

  @include at-query($max, $medium) {
    @include flex-basis(100%);
  }
}

/*================ Selectors ================*/

$selector-item-margin: $footer-spacing-extra-small / 1.5;

.selectors-form {
  @include display-flexbox();
  @include justify-content(center);
  @include flex-wrap(wrap);

  @include at-query($min, $postSmall) {
    @include justify-content(flex-start);
    margin-left: -1 * $selector-item-margin;
  }

  @include at-query($min, $large) {
    @include justify-content(flex-end);
    margin: 0 0 0 $selector-item-margin;
  }
}

.selectors-form--single-column {
  @include justify-content(center);
}

.selectors-form__item {
  margin: 0 $selector-item-margin $footer-spacing-small;
}

$max-height-disclosure: 300px;
$min-height-disclosure: 92px;
$disclosure-list-large: 1100px;

.disclosure {
  position: relative;
}

.disclosure__toggle {
  @include bodyFontItalic;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-position: right center;
  color: color-control($colorInputBg);
  cursor: pointer;
  border: 1px solid transparent;
  padding: 8px 28px 8px 10px;
  text-indent: 0.01px;
  text-overflow: '';
  white-space: nowrap;

  background: {
    color: $colorInputBg;
    image: url('{{ "ico-select.svg" | asset_url }}');
    position: right 10px center;
    repeat: no-repeat;
  }

  &:hover {
    outline: 1px solid darken($colorInputBg, 10%);
  }
}

.disclosure-list {
  @include transform(translateX(-50%));

  background-color: $colorBody;
  bottom: 120%;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.09);
  display: none;
  max-height: $max-height-disclosure;
  min-height: $min-height-disclosure;
  overflow-y: auto;
  padding: 11px 0px;
  position: absolute;
  left: 50%;
  margin: 0;

  @include at-query($min, $postSmall) {
    @include transform(translateX(0%));
    right: 0;
    left: auto;
  }
}

.disclosure-list--visible {
  display: block;
}

.disclosure-list__item {
  padding: 5px 45px 4px 15px;
  text-align: left;
  white-space: nowrap;

  .disclosure-list__option {
    @include bodyFontItalic;
    color: $colorTextBody;

    &:focus,
    &:hover {
      color: $colorSecondary;
    }
  }

  @include at-query($max, $postSmall) {
    &:active {
      background-color: rgba($colorSecondary, 0.08);
    }
  }
}

.disclosure-list__item--current .disclosure-list__option {
  color: $colorSecondary;
}

.shopify-model-viewer-ui {
  .shopify-model-viewer-ui__controls-area {
    background: $colorBody;
    border-color: rgba($colorHeadings, 0.05);
  }

  .shopify-model-viewer-ui__button {
    color: $colorHeadings;
  }

  .shopify-model-viewer-ui__button--control {
    &:hover {
      color: rgba($colorHeadings, 0.55);
    }

    &:active,
    &.focus-visible:focus {
      color: rgba($colorHeadings, 0.55);
      background: rgba($colorHeadings, 0.05);
    }

    &:not(:last-child):after {
      border-color: rgba($colorHeadings, 0.05);
    }
  }

  .shopify-model-viewer-ui__button--poster {
    background: $colorBody;
    border-color: rgba($colorHeadings, 0.05);

    &:hover,
    &:focus {
      color: rgba($colorHeadings, 0.55);
    }
  }
}

.plyr.plyr--full-ui.plyr--video {
  color: $colorHeadings;
  background-color: transparent;

  .plyr__video-wrapper {
    background-color: transparent;
  }

  .plyr__poster {
    background-color: $colorProductBackground;
  }

  // --------------------------------------------------------------
  // Fullscreen
  // --------------------------------------------------------------

  &:fullscreen .plyr__video-wrapper &:fullscreen .plyr__poster {
    background-color: #000;
  }

  /* stylelint-disable-next-line */
  &:-webkit-full-screen .plyr__video-wrapper,
  &:-webkit-full-screen .plyr__poster {
    background-color: #000;
  }

  /* stylelint-disable-next-line */
  &:-moz-full-screen .plyr__video-wrapper,
  &:-moz-full-screen .plyr__poster {
    background-color: #000;
  }

  /* stylelint-disable-next-line */
  &:-ms-fullscreen .plyr__video-wrapper,
  &:-ms-fullscreen .plyr__poster {
    background-color: #000;
  }

  // Fallback for unsupported browsers
  .plyr--fullscreen-fallback .plyr__video-wrapper,
  .plyr--fullscreen-fallback .plyr__poster {
    background-color: #000;
  }

  .plyr__control.plyr__control--overlaid {
    background-color: $colorBody;
    border-color: rgba($colorHeadings, 0.05);

    &.plyr__tab-focus,
    &:hover {
      color: rgba($colorHeadings, 0.55);
    }
  }

  .plyr__controls {
    background-color: $colorBody;
    border-color: rgba($colorHeadings, 0.05);
    margin: 0;
  }

  .plyr__progress {
    input[type='range'] {
      &::-moz-range-thumb {
        box-shadow: 2px 0 0 0 $colorBody;
      }

      &::-ms-thumb {
        box-shadow: 2px 0 0 0 $colorBody;
      }

      &::-webkit-slider-thumb {
        box-shadow: 2px 0 0 0 $colorBody;
      }

      &::-webkit-slider-runnable-track {
        background-image: linear-gradient(
          to right,
          currentColor var(--value, 0),
          rgba($colorHeadings, 0.6) var(--value, 0)
        );
      }

      &::-moz-range-track {
        background-color: rgba($colorHeadings, 0.6);
      }

      &::-ms-fill-upper {
        background-color: rgba($colorHeadings, 0.6);
      }

      &.plyr__tab-focus {
        &::-webkit-slider-runnable-track {
          box-shadow: 0 0 0 4px rgba($colorHeadings, 0.25);
        }

        &::-moz-range-track {
          box-shadow: 0 0 0 4px rgba($colorHeadings, 0.25);
        }

        &::-ms-track {
          box-shadow: 0 0 0 4px rgba($colorHeadings, 0.25);
        }
      }

      &:active {
        &::-moz-range-thumb {
          box-shadow: 0 0 0 3px rgba($colorHeadings, 0.25);
        }

        &::-ms-thumb {
          box-shadow: 0 0 0 3px rgba($colorHeadings, 0.25);
        }

        &::-webkit-slider-thumb {
          box-shadow: 0 0 0 3px rgba($colorHeadings, 0.25);
        }
      }
    }

    .plyr__tooltip {
      background-color: $colorHeadings;
      color: $colorBody;

      &::before {
        border-top-color: $colorHeadings;
      }
    }
  }

  &.plyr--loading .plyr__progress__buffer {
    background-image: linear-gradient(
      -45deg,
      rgba($colorHeadings, 0.6) 25%,
      transparent 25%,
      transparent 50%,
      rgba($colorHeadings, 0.6) 50%,
      rgba($colorHeadings, 0.6) 75%,
      transparent 75%,
      transparent
    );
  }

  .plyr__volume {
    input[type='range'] {
      color: $colorBody;

      &::-moz-range-thumb {
        box-shadow: 2px 0 0 0 $colorHeadings;
      }

      &::-ms-thumb {
        box-shadow: 2px 0 0 0 $colorHeadings;
      }

      &::-webkit-slider-thumb {
        box-shadow: 2px 0 0 0 $colorHeadings;
      }

      &::-webkit-slider-runnable-track {
        background-image: linear-gradient(
          to right,
          currentColor var(--value, 0),
          rgba($colorBody, 0.6) var(--value, 0)
        );
      }

      &::-moz-range-track,
      &::-ms-fill-upper {
        background-color: rgba($colorBody, 0.6);
      }

      &.plyr__tab-focus {
        &::-webkit-slider-runnable-track {
          box-shadow: 0 0 0 4px rgba($colorBody, 0.25);
        }

        &::-moz-range-track {
          box-shadow: 0 0 0 4px rgba($colorBody, 0.25);
        }

        &::-ms-track {
          box-shadow: 0 0 0 4px rgba($colorBody, 0.25);
        }
      }

      &:active {
        &::-moz-range-thumb {
          box-shadow: 0 0 0 3px rgba($colorBody, 0.25);
        }

        &::-ms-thumb {
          box-shadow: 0 0 0 3px rgba($colorBody, 0.25);
        }

        &::-webkit-slider-thumb {
          box-shadow: 0 0 0 3px rgba($colorBody, 0.25);
        }
      }
    }
  }
}


/*================ View-specific styles ================*/
/*================ Templates | Theme Blog ================*/
.article {
  margin-bottom: -($gutter / 2);
}

.article__featured-image-wrapper {
  position: relative;

  .no-js & {
    @include visuallyHidden();
  }
}

.article__featured-image {
  display: block;
  margin: 0 auto;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
}

.article__featured-image-link {
  display: block;
  margin-bottom: $gutter;
}

/*================ RSS ================*/
.rss-link {
  font-size: 0.6em;
}

/*================ Comments ================*/
.comment.last {
  margin-bottom: -($gutter / 2);
}

/*============= Templates | Password page =============*/

.template-password {
  height: 100vh;
  text-align: center;
}

.password-page__wrapper {
  display: table;
  height: 100%;
  width: 100%;

  @if $passwordPageUseBgImage {
    background-image: url({{ "password-page-background.jpg" | asset_url }});
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
  } @else {
    color: $colorTextBody;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @if $passwordPageUseBgImage {
      color: #ffffff;
    } @else {
      color: $colorTextBody;
    }
  }

  a {
    color: inherit;
  }

  hr {
    @if $passwordPageUseBgImage {
      border-color: inherit;
    } @else {
      border-color: $colorBorder;
    }
  }

  .rte a:hover {
    color: $colorSecondary;
    border-bottom: 1px solid $colorSecondary;
  }

  .social-sharing.clean a {
    color: inherit;
    background: transparent;
  }
}

.password-header-section {
  display: table-row;
}

.password-page__header {
  display: table-cell;
  height: 1px;
}

.password-page__header__inner {
  padding: ($gutter / 2) $gutter;
}

.password-page__logo {
  margin-top: 3 * $gutter;

  .logo {
    max-width: 100%;
  }
}

.password-page__main {
  display: table-row;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.password-page__main__inner {
  display: table-cell;
  vertical-align: middle;
  padding: ($gutter / 2) $gutter;
}

.password-page__hero {
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
  font-size: em(42px);
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;

  @include at-query($min, $postSmall) {
    font-size: em(60px);
  }

  @include at-query($min, $large) {
    font-size: em(64px);
  }
}

.password-page__message {
  font-style: italic;
  font-size: 120%;

  img {
    max-width: 100%;
  }
}

.password-page__hr {
  margin: $gutter auto;
}

.password-page__message,
.password-page__login-form,
.password-page__signup-form {
  max-width: 500px;
  margin: 0 auto;
}

.password-page__login-form {
  text-align: center;
  padding: $gutter;
}

.password-page__login-form,
.password-page__signup-form {
  @include at-query($min, $small) {
    padding: 0 $gutter;
  }

  .input-group {
    width: 100%;
  }

  .errors ul {
    list-style-type: none;
    margin-left: 0;
  }
}

.password-page__signup-form__heading {
  margin-bottom: 0.8em;
}

.password-page__social-sharing {
  margin-top: $gutter;
}

.password-page__social-sharing__heading {
  margin-bottom: 0;
}

.password-login,
.admin-login {
  margin-top: $gutter / 2;
  a:hover {
    color: inherit;
  }
}

.password-login {
  @include accentFontStack;
  font-size: em(0.8 * $baseFontSize);
  line-height: 0.8 * $baseFontSize;
}

.lock-icon-svg {
  width: 0.8 * $baseFontSize;
  height: 0.8 * $baseFontSize;
  display: inline-block;
  vertical-align: baseline;

  path {
    fill: currentColor;
  }
}

.admin-login {
  font-size: 95%;
}

.password-page__footer {
  display: table-row;
  height: 1px;
}

.password-page__footer_inner {
  display: table-cell;
  vertical-align: bottom;
  padding: $gutter;
  line-height: 1.5 * $baseFontSize;
  font-size: 95%;
}

.shopify-link {
  color: inherit;

  &:hover {
    color: inherit;
  }
}

.shopify-logo-svg {
  width: 1.5 * $baseFontSize * 120 / 35;
  height: 1.5 * $baseFontSize;
  display: inline-block;
  line-height: 0;
  vertical-align: top;

  path {
    fill: currentColor;
  }
}

/* =========
   Hiding the word 'Shopify' but not from screen readers.
   ========= */

.shopify-name {
    @include visuallyHidden;
}

.order-table {

  tbody tr + tr {
    border-top: lightgray;
  }

  thead {
    border-bottom: 1px solid $colorTextBody;
  }

  tfoot {
    border-top: 1px solid $colorTextBody;

    tr {
      &:first-child th,
      &:first-child td {
        padding-top: 1.5em;
      }

      &:nth-last-child(2) th,
      &:nth-last-child(2) td {
        padding-bottom: 1.5em;
      }

      &:last-child th,
      &:last-child td {
        border-top: 1px solid $colorTextBody;
        font-weight: normal;
        padding-top: 1.5em;
        padding-bottom: 1em;
        font-size: em(13px);
        letter-spacing: 0.15em;
        @include accentFontStack;
      }
    }
  }

  // Reset theme default table styles
  td,
  th {
    padding: 0.5em 1em;
  }

  tbody th,
  tfoot th {
    font-family: $bodyFontStack;
    font-weight: normal;
    text-transform: none;
    font-size: $baseFontSize;
    letter-spacing: 0;
  }

  tr {

    th:first-child {
      padding-left: 0;
    }

    th:last-child,
    td:last-child {
      padding-right: 0;
    }
  }

  tr:first-child th,
  tr:first-child td {
    &::after {
      display: none;
    }
  }

  @include at-query($min, $postSmall) {

    tbody {
      tr {
        &:first-child th,
        &:first-child td {
          padding-top: 1.25em;
        }

        &:last-child th,
        &:last-child td {
          padding-bottom: 1.25em;
        }
      }
    }

    tfoot {
      tr {
        td, th {
          vertical-align: bottom;
        }
      }
    }
  }

  @include at-query($max, $small) {
    border: 0;

    thead {
      display: none;
    }

    th,
    td {
      float: left;
      clear: left;
      width: 100%;
      text-align: right;
      padding: 0.5rem 0;
      border: 0;
      margin: 0;
    }

    th::before,
    td::before {
      content: attr(data-label);
      float: left;
      text-align: left;
      padding-right: 2em;
      max-width: 80%;
    }

    tbody th::before,
    tbody td::before {
      font-size: em(13px);
      letter-spacing: 0.15em;
      @include accentFontStack;
    }

    tbody {
      tr {
        td:first-child {
          padding-top: 1.5em;
        }
        td:last-child {
          padding-bottom: 1.5em;
        }
      }
    }
  }
}

.order-table__product {
  @include at-query($max, $small) {
    display: flex;
    justify-content: space-between;
  }
}

.order-discount {
  text-transform: uppercase;
  color: $colorSaleTag;
  display: block;
  line-height: 1.2em;

  .icon-saletag {
    margin-right: 0.5em;
    font-size: 0.75em;
  }
}

.order-discount--title {
  word-break: break-word;
  padding-right: 1em;
}

.order-discount--list {
  margin: 0.3em 0 0 1.3em;
  list-style: none;
  padding: 0;
}

.order-discount--cart {
  text-align: right;
}

.order-discount--cart-list {
  display: inline-block;
  width: 80%;
  margin-top: 1em;
}

.order-discount--ajax-cart {
  color: inherit;
  font-size: 0.9em;
}

.order-discount--ajax-cart-list {
  width: 60%;
  display: block;
  margin-top: 0.8em;
  margin-left: auto;
  line-height: 1.1;
}

.order-discount__item {
  text-indent: -1.3em;
  margin-bottom: 0;

  & + .order-discount__item {
    margin-top: 0.6em;
  }
}

.order-discount-wrapper {
  @include at-query($max, $small) {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

}#SearchDrawer {
  z-index:1001;
}

#shopify-section-header {
  position: fixed;
  z-index:1000;
  left:0;
  right:0;
  -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  background-color: {{ settings.color_body_bg }};
}

#PageContainer {
  padding-top: 80px;
}

@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
}
}@media (max-width:768px) {
#shopify-section-featured-collections .collection-collage__item {
    width: 100%;  
}
}

#shopify-section-header {
z-index: 9999;
}

ul.no-bullets.social-icons {
  text-align: center;
  
}


.site-nav__dropdown-link {font-size: 19px !important;}

.grid-product__title {font-size: 18px !important;}
.grid-product__price {font-size: 14px !important;}

.template-product .product-single__title {
	font-size: 22px;}

.template-product .product-single__vendor {
  font-size:18px;
}

.template-collection .section-header {
    margin-bottom: 5px;
}

.product-single{
text-align: left !important;
}


.product--wrapper {
height: 100%;
}
.reveal {
    margin: 0 auto;
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0;
    transition: all 0.0s;
    z-index: 9;
}
.grid-product__wrapper:hover .reveal {
    opacity: 1;
}
.grid-product__wrapper:hover .product--wrapper {
    opacity: 1;
}


header.site-header {
    padding-top: 0px;
  padding-bottom: 0px;
}
  
input#Quantity {
    max-width: 60px;
}
dmwwebartisan
Shopify Partner
9825 2237 3078

This is an accepted solution.

Hi

try to change code Sections/header. liquid file
find This code

<nav class="grid__item large--two-thirds large--text-right medium-down--hide" role="navigation">

Replace or add new code

<nav class="grid__item large--two-quarter large--text-left medium-down--hide" role="navigation">

I hope this will work for you.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

jtan
Trailblazer
155 4 24

that worked thank you again

bindwear
New Member
2 0 1

Hi there, late to the party but looking for some help.  Your code helepd me in moving my navbar links to to center. However, I only wanted to move the page links and not the icons.  Can you please help so that the icons stay on the right side to match where the logo is on the left? Thanks

3f7f07573eb625c7d931b35bcafe42d7.png