{% comment %} Decor Cedar collection top-intro refresh: 2026-06-13T01:16:00Z {% endcomment %}

{% stylesheet %}
  body h1 {
    font-size: 2.5rem;
    line-height: 1.08;
    letter-spacing: 0;
  }

  @media screen and (width >= 990px) {
    body h1 {
      font-size: 3rem;
    }
  }

  @media screen and (width < 750px) {
    body h1 {
      font-size: 2rem;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    @media screen and (width >= 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .collection-wrapper {
    @media screen and (width >= 750px) {
      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (width >= 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .main-collection-grid {
    @media screen and (width >= 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (width >= 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__item
    .group-block {
    @media screen and (width < 750px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__item
    .group-block {
    @media screen and (width < 750px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  .sd-collection-description {
    padding-block-start: 0;
    padding-block-end: 0;
  }

  .sd-collection-description__content {
    display: block;
    width: min(var(--page-width), calc(100% - var(--page-margin) * 2));
    margin-inline: auto;
  }

  .sd-collection-intro {
    width: min(var(--page-width), calc(100% - var(--page-margin) * 2));
    margin: 0 auto var(--padding-xl);
    padding: 18px 20px;
    border: 1px solid rgba(25, 25, 25, 0.1);
    border-left: 4px solid #24342f;
    border-radius: 8px;
    background: #fffefb;
    box-shadow: 0 12px 30px rgba(20, 24, 22, 0.06);
  }

  .sd-collection-intro__eyebrow {
    margin: 0 0 7px;
    color: rgba(25, 25, 25, 0.7);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .sd-collection-intro__copy {
    display: grid;
    gap: 8px;
    color: rgba(25, 25, 25, 0.86);
    font-size: 1rem;
    line-height: 1.55;
  }

  .sd-collection-intro__copy p {
    margin: 0;
  }

  .sd-collection-intro__copy strong {
    color: #18211e;
    font-weight: 700;
  }

  @media screen and (width >= 750px) {
    .sd-collection-intro {
      padding: 20px 24px;
    }

    .sd-collection-intro__copy {
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
      gap: 20px;
    }
  }

  @media screen and (width < 750px) {
    .sd-collection-intro {
      margin-block-end: var(--padding-lg);
      padding: 16px;
    }
  }

{% endstylesheet %}
{% liquid
  # Onboarding: When no products are available, we show placeholder items
  assign products = ''
  if request.design_mode and shop.products_count == 0
    for i in (1..16)
      assign products = products | append: ' ,'
    endfor
    assign products = products | split: ','
  endif

  assign sd_collection_title_downcase = collection.title | downcase
  assign sd_collection_intro_label = collection.title | append: ' United States'
  assign sd_collection_intro_primary = 'Shop ' | append: sd_collection_title_downcase | append: ' selected for American homes that need better sofa protection, cleaner styling and a fast room refresh without replacing furniture.'
  assign sd_collection_intro_secondary = 'Compare washable, pet friendly and easy-care Decor Cedar designs by fit, fabric, colour and everyday use so you can choose the right couch cover before you open a product page.'

  case collection.handle
    when 'sofa-covers'
      assign sd_collection_intro_primary = 'Shop sofa covers in United States for a cleaner, more polished lounge without buying a new sofa. This range focuses on washable comfort, everyday protection and colours that suit modern American homes.'
      assign sd_collection_intro_secondary = 'Compare couch covers, stretch sofa covers, pet friendly sofa protectors and complete cover sets by size, fabric, texture and room style before choosing the best fit.'
    when 'couch-covers'
      assign sd_collection_intro_primary = 'Explore couch covers made for American living rooms, rental homes and family lounges where comfort, easy cleaning and fast style upgrades matter.'
      assign sd_collection_intro_secondary = 'Use this collection to compare couch cover styles for pets, kids, spills, worn cushions and seasonal room updates without scrolling past the products first.'
    when 'waterproof-sofa-covers'
      assign sd_collection_intro_primary = 'Browse water resistant sofa covers for homes that need extra confidence around light spills, pets and daily lounge use while keeping the room styled and comfortable.'
      assign sd_collection_intro_secondary = 'Compare protective couch covers by size, stretch, fabric feel and washable care so you can find practical coverage for American sofas.'
    when 'pet-friendly-sofa-covers'
      assign sd_collection_intro_primary = 'Shop pet friendly sofa covers for American homes with dogs, cats, kids and busy everyday use. These covers help protect against fur, marks and daily wear while keeping the sofa inviting.'
      assign sd_collection_intro_secondary = 'Compare non slip, washable, scratch-resistant and plush couch cover options that make the lounge easier to maintain without losing comfort or style.'
    when 'sofa-protector'
      assign sd_collection_intro_primary = 'Find sofa protectors for everyday American homes where spills, pets, children and regular lounging can quickly wear down the furniture.'
      assign sd_collection_intro_secondary = 'Compare Decor Cedar protectors by coverage level, fabric, grip, colour and care needs so the right product is easier to choose before checkout.'
    when 'slipcovers'
      assign sd_collection_intro_primary = 'Shop slipcovers that refresh tired sofas with a fitted, easy-care look for American apartments, family rooms and rental properties.'
      assign sd_collection_intro_secondary = 'Compare stretch slipcovers, sofa covers and couch protectors by size, colour and fabric feel to get a cleaner fit without custom upholstery.'
    when 'stretch-sofa-covers'
      assign sd_collection_intro_primary = 'Browse stretch sofa covers for a flexible fitted look across common American sofa sizes, from single chairs to larger family lounges.'
      assign sd_collection_intro_secondary = 'Compare stretch couch covers by size, colour, fabric texture and washable care so the cover looks intentional rather than loose or temporary.'
    when 'sectional-sofa-covers'
      assign sd_collection_intro_primary = 'Shop sectional sofa covers for modular lounges, chaise sofas and multi-piece living room layouts that need practical protection across every section.'
      assign sd_collection_intro_secondary = 'Compare section-friendly couch cover options by layout, piece type, fabric and colour so your larger sofa still feels coordinated and easy to maintain.'
    when 'l-shaped-sofa-covers'
      assign sd_collection_intro_primary = 'Find L-shaped sofa covers for chaise lounges and corner couches where normal one-piece covers rarely fit cleanly.'
      assign sd_collection_intro_secondary = 'Compare flexible Decor Cedar options by seat layout, fabric, stretch and pet friendly protection to make an L-shaped lounge easier to style and protect.'
    when '1-seater-sofa-covers'
      assign sd_collection_intro_primary = 'Shop 1 seater sofa covers for accent chairs, armchairs and single lounge seats that need a cleaner look or extra protection.'
      assign sd_collection_intro_secondary = 'Compare single seat couch covers by fabric, colour, washable care and pet friendly use so smaller seats match the rest of your lounge.'
    when '2-seater-sofa-covers'
      assign sd_collection_intro_primary = 'Browse 2 seater sofa covers for compact lounges, apartments and smaller family rooms where fit and fabric choice matter.'
      assign sd_collection_intro_secondary = 'Compare two seater couch covers by colour, stretch, texture and everyday protection to refresh the sofa without replacing it.'
    when '3-seater-sofa-covers'
      assign sd_collection_intro_primary = 'Shop 3 seater sofa covers for larger American lounges that need comfort, coverage and a more styled finish.'
      assign sd_collection_intro_secondary = 'Compare three seater couch covers by fabric, size, colour, washable care and pet friendly protection before choosing the best match.'
    when 'outdoor-covers'
      assign sd_collection_intro_primary = 'Explore outdoor sofa covers for patios, balconies and covered alfresco spaces where furniture needs practical protection between uses.'
      assign sd_collection_intro_secondary = 'Compare outdoor couch covers by size, fabric weight, fastening style and easy-care finish for American outdoor living areas.'
    when 'patterned-sofa-covers'
      assign sd_collection_intro_primary = 'Shop patterned sofa covers when your lounge needs personality, colour and a more designed look without changing the furniture underneath.'
      assign sd_collection_intro_secondary = 'Compare floral, bohemian, geometric and textured couch cover styles by room mood, fabric feel and washable everyday care.'
    when 'grey-sofa-covers'
      assign sd_collection_intro_primary = 'Browse grey sofa covers for a neutral, modern lounge update that works with timber, black, white and coastal American interiors.'
      assign sd_collection_intro_secondary = 'Compare grey couch covers by texture, stretch, size and pet friendly care to find a practical shade that still feels premium.'
    when 'white-sofa-covers'
      assign sd_collection_intro_primary = 'Shop white sofa covers for a brighter, cleaner lounge look with washable protection for everyday American homes.'
      assign sd_collection_intro_secondary = 'Compare white and light neutral couch covers by fabric, fit and care needs so the room feels fresh without becoming difficult to maintain.'
    when 'black-sofa-covers'
      assign sd_collection_intro_primary = 'Find black sofa covers for a bold, practical lounge refresh that hides daily marks while giving the room stronger definition.'
      assign sd_collection_intro_secondary = 'Compare black couch covers by fabric texture, stretch, size and washable care for modern homes, pets and busy living rooms.'
    when 'velvet-sofa-covers'
      assign sd_collection_intro_primary = 'Shop velvet sofa covers for a softer, more elevated lounge feel with rich texture and comfortable everyday protection.'
      assign sd_collection_intro_secondary = 'Compare velvet-look couch covers by colour, size, plushness and care needs to make the sofa feel warmer and more premium.'
  endcase

  assign sd_metafield_intro_label = collection.metafields.sofa_decor_seo.top_intro_label.value
  assign sd_metafield_intro_primary = collection.metafields.sofa_decor_seo.top_intro_primary.value
  assign sd_metafield_intro_secondary = collection.metafields.sofa_decor_seo.top_intro_secondary.value

  if sd_metafield_intro_label != blank
    assign sd_collection_intro_label = sd_metafield_intro_label
  endif

  if sd_metafield_intro_primary != blank
    assign sd_collection_intro_primary = sd_metafield_intro_primary
  endif

  if sd_metafield_intro_secondary != blank
    assign sd_collection_intro_secondary = sd_metafield_intro_secondary
  endif
%}

<script
  src="{{ 'results-list.js' | asset_url }}"
  type="module"
></script>

{% javascript %}
  const url = new URL(window.location.href);
  if (url.hash) {
    document.addEventListener(
      'DOMContentLoaded',
      () => {
        const card = document.getElementById(url.hash.slice(1));
        if (card) {
          card.scrollIntoView({ behavior: 'instant' });
        }
      },
      { once: true }
    );
  }
{% endjavascript %}

{% comment %} We always render this full-width, as the child blocks have width: page/full settings {% endcomment %}
<div class="section-background color-{{ section.settings.color_scheme }}"></div>
<results-list
  class="section product-grid-container color-{{ section.settings.color_scheme }}"
  style="--padding-block-start: {{ section.settings.padding-block-start }}px; --padding-block-end: {{ section.settings.padding-block-end }}px;"
  section-id="{{ section.id }}"
>
  {% render 'skip-to-content-link', href: '#ResultsList', text: 'accessibility.skip_to_results_list' %}

  <section
    class="sd-collection-intro"
    data-collection-intro="sofa-decor-top-seo-intro-2026-06"
    aria-label="{{ collection.title | escape }} collection overview"
  >
    <p class="sd-collection-intro__eyebrow">{{ sd_collection_intro_label }}</p>
    <div class="sd-collection-intro__copy">
      <p><strong>{{ collection.title }}</strong>: {{ sd_collection_intro_primary }}</p>
      <p>{{ sd_collection_intro_secondary }}</p>
    </div>
  </section>

  <div
    class="collection-wrapper grid gap-style"
  >
    {% content_for 'block',
      type: 'filters',
      id: 'filters',
      results: collection,
      results_size: collection.products_count
    %}

    {% if request.design_mode and shop.products_count == 0 %}
      {% paginate products by 24 %}
        {% capture children %}
          {% for product in products %}
            <li
              class="product-grid__item product-grid__item--{{ forloop.index0 }}"
              data-page="{{ paginate.current_page }}"
              data-product-id="{{ product.id }}"
              data-view-transition-id="{{ product.id }}"
              ref="cards[]"
            >
              {% content_for 'block', type: 'product-card', id: 'product-card', closest.product: product %}
            </li>
          {% endfor %}
        {% endcapture %}
        {% render 'product-grid', section: section, children: children, products: products, paginate: paginate %}
      {% endpaginate %}
    {% else %}
      {% paginate collection.products by 24 %}
        {% capture children %}
          {% for product in collection.products %}
          <li
            id="{{ section.id }}-{{ product.id }}"
            class="product-grid__item product-grid__item--{{ forloop.index0 }}"
            data-page="{{ paginate.current_page }}"
            data-product-id="{{ product.id }}"
            ref="cards[]"
          >
            {% # theme-check-disable %}
            {% content_for 'block', type: 'product-card', id: 'product-card', closest.product: product %}
            {% # theme-check-enable %}
          </li>
        {% endfor %}
        {% endcapture %}
        {% render 'product-grid',
          section: section,
          children: children,
          products: collection.products,
          paginate: paginate
        %}
      {% endpaginate %}
    {% endif %}
  </div>
</results-list>

{% liquid
  assign sd_collection_description = collection.description
%}
{% if collection.handle == 'pet-friendly-sofa-covers' %}
  {% capture sd_collection_description %}
    {% render 'sd-pet-friendly-collection-description' %}
  {% endcapture %}
{% endif %}
{% liquid
  assign sd_collection_description = sd_collection_description | replace: '<h1', '<h2'
  assign sd_collection_description = sd_collection_description | replace: '</h1>', '</h2>'
%}
{% if sd_collection_description != blank %}
  <div class="section color-{{ section.settings.color_scheme }} sd-collection-description">
    <rte-formatter class="rte sd-collection-description__content">
      {{ sd_collection_description }}
    </rte-formatter>
  </div>
{% endif %}

{% schema %}
{
  "name": "t:names.collection_container",
  "enabled_on": {
    "templates": ["collection"]
  },
  "settings": [
    {
      "type": "select",
      "id": "layout_type",
      "label": "t:settings.type",
      "options": [
        {
          "value": "grid",
          "label": "t:options.grid"
        },
        {
          "value": "organic",
          "label": "t:options.editorial"
        }
      ],
      "default": "grid"
    },
    {
      "type": "select",
      "id": "product_card_size",
      "label": "t:settings.card_size",
      "options": [
        {
          "value": "small",
          "label": "t:options.small"
        },
        {
          "value": "medium",
          "label": "t:options.medium"
        },
        {
          "value": "large",
          "label": "t:options.large"
        },
        {
          "value": "extra-large",
          "label": "t:options.extra_large"
        }
      ],
      "default": "medium",
      "visible_if": "{{ section.settings.layout_type == 'grid' }}"
    },
    {
      "type": "select",
      "id": "mobile_product_card_size",
      "label": "t:settings.mobile_card_size",
      "options": [
        {
          "value": "small",
          "label": "t:options.small"
        },
        {
          "value": "large",
          "label": "t:options.large"
        }
      ],
      "default": "small"
    },
    {
      "type": "header",
      "content": "t:content.layout"
    },
    {
      "type": "select",
      "id": "product_grid_width",
      "label": "t:settings.width",
      "options": [
        {
          "value": "centered",
          "label": "t:options.page"
        },
        {
          "value": "full-width",
          "label": "t:options.full"
        }
      ],
      "default": "centered"
    },
    {
      "type": "checkbox",
      "id": "full_width_on_mobile",
      "label": "t:settings.full_width_on_mobile",
      "default": true,
      "visible_if": "{{ section.settings.product_grid_width != 'full-width' }}"
    },
    {
      "type": "range",
      "id": "columns_gap_horizontal",
      "label": "t:settings.horizontal_gap",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "default": 16
    },
    {
      "type": "range",
      "id": "columns_gap_vertical",
      "label": "t:settings.vertical_gap",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "default": 16
    },
    {
      "type": "range",
      "id": "padding-inline-start",
      "label": "t:settings.left_padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-end",
      "label": "t:settings.right_padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "header",
      "content": "t:content.section_layout"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:settings.color_scheme",
      "default": "scheme-1"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top_padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom_padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 8
    }
  ],
  "presets": []
}
{% endschema %}
