{% liquid
  assign sd_product_text = product.title | append: ' ' | append: product.handle | append: ' ' | append: product.type | append: ' ' | append: product.tags | downcase
  assign sd_fit_mode = 'universal'
  assign sd_has_size_option = false
  assign sd_size_label = ''
  assign sd_size_count = 0
  assign sd_has_90 = false
  assign sd_has_110 = false
  assign sd_has_180 = false
  assign sd_has_seater = false

  for option in product.options_with_values
    assign sd_option_name = option.name | downcase
    if sd_option_name contains 'size' or sd_option_name contains 'piece' or sd_option_name contains 'seater'
      assign sd_has_size_option = true
      assign sd_size_label = option.name
      assign sd_size_count = option.values.size
    endif

    for value in option.values
      assign sd_value = value | downcase
      if sd_value contains '90x' or sd_value contains '90 x'
        assign sd_has_90 = true
      endif
      if sd_value contains '110x' or sd_value contains '110 x'
        assign sd_has_110 = true
      endif
      if sd_value contains '180x' or sd_value contains '180 x'
        assign sd_has_180 = true
      endif
      if sd_value contains 'seater' or sd_value contains 'seat'
        assign sd_has_seater = true
      endif
    endfor
  endfor

  if sd_product_text contains 'outdoor' or sd_product_text contains 'patio' or sd_product_text contains 'rattan'
    assign sd_fit_mode = 'outdoor'
  elsif sd_product_text contains 'stretch' or sd_product_text contains 'slipcover' or sd_product_text contains 'elastic'
    assign sd_fit_mode = 'stretch'
  elsif sd_product_text contains 'piece' or sd_product_text contains 'armchair piece' or sd_product_text contains 'modular' or sd_has_90 or sd_has_110
    assign sd_fit_mode = 'piece'
  elsif sd_product_text contains 'throw' or sd_product_text contains 'blanket' or sd_product_text contains 'towel' or sd_has_180
    assign sd_fit_mode = 'throw'
  elsif sd_product_text contains 'seat cover' or sd_product_text contains 'cushion cover' or sd_product_text contains 'seat pad' or sd_product_text contains 'mat'
    assign sd_fit_mode = 'seat'
  endif

  assign sd_heading = 'Choose the right size for ' | append: product.title
%}

<section class="sd-size-guide" data-sd-fit-mode="{{ sd_fit_mode }}" aria-labelledby="sd-size-guide-title-{{ product.id }}">
  <div class="sd-size-guide__head">
    <p class="sd-size-guide__eyebrow">Size and fit guide</p>
    <h2 id="sd-size-guide-title-{{ product.id }}">{{ sd_heading | escape }}</h2>
    <p>
      Most Decor Cedar covers are flexible. The best result comes from matching the cover style to your sofa shape,
      then using the right tuck, overhang or section placement rather than relying only on the sofa model name.
    </p>
  </div>

  <div class="sd-size-guide__body">
    <div class="sd-size-guide__panel sd-size-guide__panel--primary">
      <h3>How this cover works</h3>
      {% case sd_fit_mode %}
        {% when 'piece' %}
          <p>This product is designed as flexible cover pieces. Use each piece on the seat, backrest, armrest, chaise or modular section that needs coverage.</p>
          <ul>
            <li>Measure each sofa section separately, not the total sofa width only.</li>
            <li>Choose one piece per area you want to cover, then tuck the edges into gaps for a neater look.</li>
            <li>For L-shaped, chaise or modular sofas, repeat the same logic section by section.</li>
          </ul>
        {% when 'throw' %}
          <p>This is a drape-style sofa cover. It works by laying across the sofa and using overhang and tucking to shape the final fit.</p>
          <ul>
            <li>Measure the full area you want covered from side to side and front to back.</li>
            <li>Choose the larger size if you want more side drop, deeper tuck or a softer relaxed look.</li>
            <li>For sectionals, use separate covers for each long run where possible.</li>
          </ul>
        {% when 'stretch' %}
          <p>This is a stretch-fit slipcover. It wraps around the sofa frame and depends on both measurement range and how firmly the fabric is tucked.</p>
          <ul>
            <li>Measure outside arm to outside arm in a straight line.</li>
            <li>Check arm shape, back height and cushion gaps before choosing the size.</li>
            <li>If your sofa is between sizes, choose the larger size and tuck the extra fabric.</li>
          </ul>
        {% when 'seat' %}
          <p>This style focuses on the most-used seat or cushion areas. It is ideal when the sofa frame is fine but the sitting area needs comfort, protection or a fresh look.</p>
          <ul>
            <li>Measure the cushion or seat area you want the cover to sit on.</li>
            <li>For separate cushions, choose one cover per cushion or one longer cover across the full seat run.</li>
            <li>Add backrest or armrest pieces only if this product offers those options.</li>
          </ul>
        {% when 'outdoor' %}
          <p>This cover is chosen by overall furniture dimensions. Measure the widest, deepest and tallest points so the cover can protect the full shape.</p>
          <ul>
            <li>Measure width, depth and height with cushions in their normal position.</li>
            <li>Account for high arms, rounded backs, chaise extensions and outdoor frame shapes.</li>
            <li>Choose the closest size with a little allowance for easy placement.</li>
          </ul>
        {% else %}
          <p>This cover is flexible across many sofa shapes. Fit depends on the area covered, the available fabric to tuck, and how your sofa arms and back are shaped.</p>
          <ul>
            <li>Measure overall width, seat depth, back height and arm height.</li>
            <li>Use a larger size when your sofa has wide arms, rounded edges or deep cushions.</li>
            <li>For L-shaped or modular sofas, treat each section as its own measurement.</li>
          </ul>
      {% endcase %}
    </div>

    <div class="sd-size-guide__panel">
      <h3>Measure before choosing</h3>
      <ol>
        <li><strong>Width:</strong> measure straight across the sofa from outside arm to outside arm.</li>
        <li><strong>Depth:</strong> measure from the front edge of the seat to the back cushion or frame.</li>
        <li><strong>Back and arms:</strong> measure height and thickness so you know how much fabric needs to tuck or drop.</li>
        <li><strong>Sections:</strong> for chaise, L-shaped or modular sofas, measure every section separately.</li>
      </ol>
    </div>
  </div>

  {% if sd_has_size_option %}
    <div class="sd-size-guide__sizes" aria-label="{{ sd_size_label | escape }} options for {{ product.title | escape }}">
      <div class="sd-size-guide__sizes-head">
        <h3>{{ sd_size_label | escape }} options in this product</h3>
        <p>These {{ sd_size_count }} live {{ sd_size_label | downcase | escape }} choices are pulled from {{ product.title | escape }} variants. Use them as a practical guide, then choose the colour and size variant above.</p>
      </div>

      <div class="sd-size-guide__size-list">
        {% for option in product.options_with_values %}
          {% assign sd_option_name = option.name | downcase %}
          {% if sd_option_name contains 'size' or sd_option_name contains 'piece' or sd_option_name contains 'seater' %}
            {% for value in option.values %}
              {% assign sd_value = value | downcase %}
              <div class="sd-size-guide__size-row">
                <strong>{{ value | escape }}</strong>
                <span>
                  {% if sd_value contains '90x90' or sd_value contains '90 x 90' %}
                    Best for one seat cushion, a backrest panel, an armrest panel or a small modular section.
                  {% elsif sd_value contains '90x120' or sd_value contains '90 x 120' %}
                    Best for a wider single seat, chaise surface or deeper cushion area.
                  {% elsif sd_value contains '110x160' or sd_value contains '110 x 160' %}
                    Best for a two-seat run, medium chaise section or wider lounge surface.
                  {% elsif sd_value contains '110x240' or sd_value contains '110 x 240' %}
                    Best for a three to four-seat run, long chaise section or generous sofa coverage.
                  {% elsif sd_value contains '180x260' or sd_value contains '180 x 260' %}
                    Best for armchairs, compact sofas or a neat smaller drape.
                  {% elsif sd_value contains '180x340' or sd_value contains '180 x 340' %}
                    Best for two to three-seat sofas where you want extra tuck and side drop.
                  {% elsif sd_value contains '180x420' or sd_value contains '180 x 420' %}
                    Best for larger three to four-seat sofas or a more generous relaxed drape.
                  {% elsif sd_value contains '1 seater' or sd_value contains 'one seater' or sd_value contains 'single' %}
                    Best for armchairs, single-seat modules or one cushion area.
                  {% elsif sd_value contains '2 seater' or sd_value contains 'two seater' %}
                    Best for a two-seat sofa section or two cushion run.
                  {% elsif sd_value contains 'three' %}
                    Best for three-seat sofas or a longer family lounge section.
                  {% elsif sd_value contains '3-4' and sd_value contains 'seater' %}
                    Best for three to four-seat sofas, long family lounges or a wider sofa section.
                  {% elsif sd_value contains '3 seater' or sd_value contains '3-seater' or sd_value contains 'three seater' or sd_value contains 'three' %}
                    Best for three-seat sofas or a longer family lounge section.
                  {% elsif sd_value contains 'four' %}
                    Best for larger sofa sections where extra coverage is needed.
                  {% elsif sd_value contains '4 seater' or sd_value contains '4-seater' or sd_value contains 'four seater' or sd_value contains 'four' %}
                    Best for larger sofa sections where extra coverage is needed.
                  {% else %}
                    Match this named option to the closest sofa section you want covered. If your measurement is close to the upper edge, choose the larger option where available.
                  {% endif %}
                </span>
              </div>
            {% endfor %}
          {% endif %}
        {% endfor %}
      </div>
    </div>
  {% endif %}

  <div class="sd-size-guide__accordion">
    <details open>
      <summary>What if my sofa is between sizes?</summary>
      <p>Choose the larger size. Extra fabric is easier to tuck, drape and adjust than a cover that is too tight or too short.</p>
    </details>
    <details>
      <summary>Will this work on L-shaped, chaise or modular sofas?</summary>
      <p>Yes, but measure each section separately. Piece-based and drape-style covers are usually the most flexible for L-shaped sofas because you can cover each run independently.</p>
    </details>
    <details>
      <summary>How do I make the cover look neater?</summary>
      <p>Smooth the fabric from the centre outwards, tuck excess material into cushion gaps, then adjust the arms and front edge last. On leather or very smooth sofas, a thin non-slip layer underneath can help.</p>
    </details>
  </div>

  <div class="sd-size-guide__help">
    <strong>Still unsure?</strong>
    Send us your sofa width, seat depth, back height and a front photo. We can help you choose the safest size before ordering.
  </div>

  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": {{ 'What size do I need for ' | append: product.title | json }},
          "acceptedAnswer": {
            "@type": "Answer",
            "text": {{ 'Measure your sofa width, depth, back height and arm shape, then compare those measurements with the size options shown on this product page. If your sofa is between sizes, choose the larger option so the cover has enough fabric to tuck and sit neatly.' | json }}
          }
        },
        {
          "@type": "Question",
          "name": "Will this sofa cover fit an L-shaped or chaise sofa?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "For L-shaped, chaise and modular sofas, measure each section separately. A flexible piece-based or drape-style cover can usually be placed section by section, while stretch covers need the correct size for each sofa run."
          }
        },
        {
          "@type": "Question",
          "name": "How do I keep a Decor Cedar cover looking neat?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Smooth the cover from the centre outwards, tuck the extra fabric into sofa gaps, and choose a larger size when you need more overhang or a softer relaxed fit."
          }
        }
      ]
    }
  </script>
</section>

<style>
  .sd-size-guide {
    margin: 16px 0 20px;
    padding: 18px;
    border: 1px solid rgba(20, 20, 20, 0.1);
    border-radius: 8px;
    background: #fffaf2;
    color: #191919;
  }

  .sd-size-guide__head {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
  }

  .sd-size-guide__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a4f24;
  }

  .sd-size-guide h2,
  .sd-size-guide h3,
  .sd-size-guide p {
    margin: 0;
  }

  .sd-size-guide h2 {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  .sd-size-guide h3 {
    font-size: 0.98rem;
    line-height: 1.3;
  }

  .sd-size-guide p,
  .sd-size-guide li,
  .sd-size-guide span {
    font-size: 0.92rem;
    line-height: 1.48;
  }

  .sd-size-guide__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }

  .sd-size-guide__panel {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 8px;
    background: #ffffff;
  }

  .sd-size-guide__panel--primary {
    background: #fff;
  }

  .sd-size-guide ul,
  .sd-size-guide ol {
    margin: 0;
    padding-left: 19px;
  }

  .sd-size-guide li + li {
    margin-top: 6px;
  }

  .sd-size-guide__sizes {
    margin-top: 12px;
    padding: 14px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(20, 20, 20, 0.08);
  }

  .sd-size-guide__sizes-head {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
  }

  .sd-size-guide__size-list {
    display: grid;
    gap: 8px;
  }

  .sd-size-guide__size-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    border-top: 1px solid rgba(20, 20, 20, 0.08);
  }

  .sd-size-guide__size-row strong {
    font-size: 0.92rem;
  }

  .sd-size-guide__accordion {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }

  .sd-size-guide details {
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
  }

  .sd-size-guide summary {
    cursor: pointer;
    padding: 11px 0;
    font-weight: 700;
    font-size: 0.92rem;
  }

  .sd-size-guide details p {
    padding: 0 0 12px;
  }

  .sd-size-guide__help {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #191919;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  @media (max-width: 749px) {
    .sd-size-guide {
      padding: 14px;
    }

    .sd-size-guide__body,
    .sd-size-guide__size-row {
      grid-template-columns: 1fr;
    }
  }
</style>