{% liquid
  assign menu_content_type = block.settings.menu_style | default: 'text'
  assign image_border_radius = block.settings.image_border_radius
  assign color_scheme_classes = ''
  assign color_scheme_setting_id = 'color_scheme_' | append: section.settings.menu_row
  assign current_color_scheme = block.settings.color_scheme
  assign parent_color_scheme = section.settings[color_scheme_setting_id]

  if parent_color_scheme.id != current_color_scheme.id
    assign color_scheme_classes = ' color-' | append: current_color_scheme
  endif

  # Check if header and menu colors match. This is used to apply different padding styles in css
  if parent_color_scheme.settings.background.rgb == current_color_scheme.settings.background.rgb
    assign color_scheme_classes = color_scheme_classes | append: ' color-scheme-matches-parent'
  endif

  if block.settings.menu_style == 'featured_collections'
    assign ratio = block.settings.featured_collections_aspect_ratio
  elsif block.settings.menu_style == 'featured_products'
    assign ratio = block.settings.featured_products_aspect_ratio
  endif
%}

{% capture children %}
  {% assign sd_menu_curated_links = 'Sofa Covers|/collections/sofa-covers,Couch Covers|/collections/couch-covers,Pet-Friendly Covers|/collections/pet-friendly-sofa-covers,Water Resistant Covers|/collections/water-resistant-sofa-covers,Size Guide|/pages/how-to-measure-sofa-covers,Reviews|/pages/reviews' | split: ',' %}
  {% for sd_menu_item in sd_menu_curated_links %}
    {% assign sd_menu_parts = sd_menu_item | split: '|' %}
    <li role="presentation" class="menu-list__list-item sd-menu-curated-links">
      <a role="menuitem" href="{{ sd_menu_parts[1] }}" class="menu-list__link">
        <span class="menu-list__link-title">{{ sd_menu_parts[0] }}</span>
      </a>
    </li>
  {% endfor %}
  <li class="menu-list__list-item" role="presentation" slot="more">
    <button role="menuitem" class="button menu-list__link button-unstyled">
      <span class="menu-list__link-title">More</span>
    </button>
  </li>
{% endcapture %}

<nav header-menu>
  <div
    class="menu-list"
    style="{% render 'menu-font-styles', settings: block.settings %}"
  >
    {% assign class = 'overflow-menu' | append: color_scheme_classes %}
    {% render 'overflow-list', class: class, children: children, minimum-items: 2 %}
  </div>
</nav>


<style>
  header-menu .sd-menu-curated-links .menu-list__link-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #26362a;
    font-weight: 650;
    letter-spacing: 0;
  }

  header-menu .sd-menu-curated-links .menu-list__link-title::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f5a3d, #9a7248);
    box-shadow: 0 0 0 3px rgba(47, 90, 61, .08);
    opacity: .82;
  }

  header-menu .sd-menu-curated-links .menu-list__link:hover .menu-list__link-title {
    color: #8a643b;
  }
</style>