{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Shop the look: a lifestyle image with up to six product hotspots and a product list beside it
  (below on mobile). Clicking a hotspot opens a small product card next to the dot and highlights
  the product in the list. The list is plain HTML, so every product stays reachable without JS.
  Separate desktop and mobile image, and optional separate hotspot positions on mobile.
  Depends on: snippets/lib-image.liquid, snippets/lib-button.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif
  assign uid = 'LibStl-' | append: section.id
-%}

<div
  class="lib-shop-the-look lib-shop-the-look--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-list="{{ s.list_position }}"
  data-image="{{ s.image_position }}"
  data-image-width="{{ s.image_width }}"
  data-hotspot="{{ s.hotspot_style }}"
  {% if s.pulse %}
    data-pulse
  {% endif %}
  style="
    --lib-bg: {{ s.color_bg }};
    {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
    --lib-text: {{ s.color_text }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-sale: {{ s.color_sale }};
    --lib-hotspot: {{ s.color_hotspot }};
    --lib-hotspot-icon: {{ s.color_hotspot_icon }};
    --lib-card: {{ s.color_card }};
    --lib-card-text: {{ s.color_card_text }};
    --lib-dot: {{ s.hotspot_size }}px;
    --lib-radius-img: {{ s.image_radius }}px;
    --lib-pt: {{ s.padding_top }}px;
    --lib-pb: {{ s.padding_bottom }}px;
    --lib-pt-m: {{ s.padding_top_mobile }}px;
    --lib-pb-m: {{ s.padding_bottom_mobile }}px;
  "
>
  <lib-shop-the-look-hotspots class="lib-shop-the-look__inner">
    {%- if s.heading != blank or s.text != blank -%}
      <header class="lib-shop-the-look__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-shop-the-look__heading lib-shop-the-look__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-shop-the-look__text">{{ s.text }}</div>
        {%- endif -%}
      </header>
    {%- endif -%}

    <div class="lib-shop-the-look__media">
      <div class="lib-shop-the-look__frame" data-ratio="{{ s.image_ratio }}" data-ratio-m="{{ s.image_ratio_mobile }}">
        {%- render 'lib-image',
          image: s.image,
          image_mobile: s.image_mobile,
          class: 'lib-shop-the-look__img',
          sizes: '(min-width: 990px) 66vw, 100vw',
          eager: eager
        -%}
      </div>

      {%- assign n = 0 -%}
      {%- for block in section.blocks -%}
        {%- liquid
          assign b = block.settings
          assign p = b.product
          if p == blank and request.design_mode == false
            continue
          endif
          assign n = n | plus: 1
          assign card_id = uid | append: '-card-' | append: block.id
          assign title = p.title | default: 'Example product'
          assign xm = b.x
          assign ym = b.y
          if b.mobile_custom
            assign xm = b.x_mobile
            assign ym = b.y_mobile
          endif
        -%}
        {%- capture price_html -%}
          <span class="lib-shop-the-look__price">
            {%- if p != blank -%}
              {%- if p.compare_at_price > p.price -%}
                <span class="lib-shop-the-look__sr">Sale price</span>
                <span class="lib-shop-the-look__price-now lib-shop-the-look__price-now--sale">{{ p.price | money }}</span>
                <span class="lib-shop-the-look__sr">Regular price</span>
                <s class="lib-shop-the-look__price-was">{{ p.compare_at_price | money }}</s>
              {%- else -%}
                <span class="lib-shop-the-look__price-now">{{ p.price | money }}</span>
              {%- endif -%}
            {%- else -%}
              <span class="lib-shop-the-look__price-now">{{ 4800 | money }}</span>
            {%- endif -%}
          </span>
        {%- endcapture -%}
        <button
          type="button"
          class="lib-shop-the-look__dot"
          style="--x: {{ b.x }}%; --y: {{ b.y }}%; --xm: {{ xm }}%; --ym: {{ ym }}%;"
          aria-expanded="false"
          aria-controls="{{ card_id }}"
          aria-label="Show {{ title | escape }}"
          {{ block.shopify_attributes }}
        >
          {%- case s.hotspot_style -%}
            {%- when 'number' -%}
              <span class="lib-shop-the-look__dot-num" aria-hidden="true">{{ n }}</span>
            {%- when 'plus' -%}
              <svg class="lib-shop-the-look__dot-plus" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
                <path d="M8 3v10M3 8h10" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
              </svg>
            {%- else -%}
              <span class="lib-shop-the-look__dot-core" aria-hidden="true"></span>
          {%- endcase -%}
        </button>

        <div class="lib-shop-the-look__card" id="{{ card_id }}" role="group" aria-label="{{ title | escape }}" hidden>
          <div class="lib-shop-the-look__card-media">
            {%- if p.featured_image != blank -%}
              {{
                p.featured_image
                | image_url: width: 320
                | image_tag: class: 'lib-shop-the-look__thumb', loading: 'lazy', alt: p.featured_image.alt, widths: '160, 320'
              }}
            {%- else -%}
              {{ 'product-1' | placeholder_svg_tag: 'lib-shop-the-look__thumb lib-shop-the-look__thumb--ph' }}
            {%- endif -%}
          </div>
          <div class="lib-shop-the-look__card-body">
            {%- if b.label != blank -%}
              <p class="lib-shop-the-look__label">{{ b.label | escape }}</p>
            {%- endif -%}
            <p class="lib-shop-the-look__card-title">{{ title | escape }}</p>
            {{ price_html }}
            {%- if p != blank -%}
              <a class="lib-shop-the-look__card-link" href="{{ p.url }}">
                {{- s.card_link_label | default: 'View product' | escape -}}
                <span aria-hidden="true"> →</span>
              </a>
            {%- endif -%}
          </div>
          <button type="button" class="lib-shop-the-look__close" data-close aria-label="Close">
            <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false">
              <path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
      {%- endfor -%}
    </div>

    <div class="lib-shop-the-look__aside">
      {%- if s.list_title != blank -%}
        <p class="lib-shop-the-look__list-title">{{ s.list_title | escape }}</p>
      {%- endif -%}
      <ul class="lib-shop-the-look__list" role="list">
        {%- assign n = 0 -%}
        {%- for block in section.blocks -%}
          {%- liquid
            assign b = block.settings
            assign p = b.product
            if p == blank and request.design_mode == false
              continue
            endif
            assign n = n | plus: 1
            assign card_id = uid | append: '-card-' | append: block.id
            assign title = p.title | default: 'Example product'
            assign tag = 'div'
            if p != blank
              assign tag = 'a'
            endif
          -%}
          {%- capture price_html -%}
          <span class="lib-shop-the-look__price">
            {%- if p != blank -%}
              {%- if p.compare_at_price > p.price -%}
                <span class="lib-shop-the-look__sr">Sale price</span>
                <span class="lib-shop-the-look__price-now lib-shop-the-look__price-now--sale">{{ p.price | money }}</span>
                <span class="lib-shop-the-look__sr">Regular price</span>
                <s class="lib-shop-the-look__price-was">{{ p.compare_at_price | money }}</s>
              {%- else -%}
                <span class="lib-shop-the-look__price-now">{{ p.price | money }}</span>
              {%- endif -%}
            {%- else -%}
              <span class="lib-shop-the-look__price-now">{{ 4800 | money }}</span>
            {%- endif -%}
          </span>
        {%- endcapture -%}
          <li class="lib-shop-the-look__item" data-for="{{ card_id }}">
            <{{ tag }} class="lib-shop-the-look__item-link" {% if tag == 'a' %}href="{{ p.url }}"{% endif %}>
              {%- if s.hotspot_style == 'number' -%}
                <span class="lib-shop-the-look__item-num" aria-hidden="true">{{ n }}</span>
              {%- endif -%}
              <span class="lib-shop-the-look__item-media">
                  {%- if p.featured_image != blank -%}
                    {{
                      p.featured_image
                      | image_url: width: 192
                      | image_tag: class: 'lib-shop-the-look__thumb', loading: 'lazy', alt: p.featured_image.alt, widths: '96, 192'
                    }}
                  {%- else -%}
                    {{ 'product-1' | placeholder_svg_tag: 'lib-shop-the-look__thumb lib-shop-the-look__thumb--ph' }}
                  {%- endif -%}
                </span>
              <span class="lib-shop-the-look__item-body">
                {%- if b.label != blank -%}
                  <span class="lib-shop-the-look__label">{{ b.label | escape }}</span>
                {%- endif -%}
                <span class="lib-shop-the-look__item-title">{{ title | escape }}</span>
                {{ price_html }}
              </span>
              <svg class="lib-shop-the-look__item-arrow" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
                <path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </{{ tag }}>
          </li>
        {%- endfor -%}
      </ul>

      {%- if s.button_label != blank -%}
        <div class="lib-shop-the-look__actions">
          {%- render 'lib-button',
            label: s.button_label,
            url: s.button_url,
            style: s.button_style,
            new_tab: s.button_new_tab
          -%}
        </div>
      {%- endif -%}
    </div>
  </lib-shop-the-look-hotspots>
</div>

{% stylesheet %}
  .lib-shop-the-look {
    background-color: var(--lib-bg);
    background-image: var(--lib-bg-image, none);
    color: var(--lib-text);
    padding: var(--lib-pt) 1rem var(--lib-pb);
  }
  .lib-shop-the-look__inner {
    display: grid;
    gap: 1.75rem;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-areas: 'head' 'media' 'aside';
    grid-template-columns: minmax(0, 1fr);
  }
  .lib-shop-the-look--full .lib-shop-the-look__inner { max-width: none; }
  @media (max-width: 749px) {
    .lib-shop-the-look { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-shop-the-look[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-shop-the-look[data-show='mobile'] { display: none; }
  }
  @media (min-width: 990px) {
    .lib-shop-the-look[data-list='side'] .lib-shop-the-look__inner {
      --lib-media-col: 3fr;
      column-gap: clamp(2rem, 4vw, 4rem);
      row-gap: 2.5rem;
      grid-template-columns: minmax(0, var(--lib-media-col)) minmax(0, 2fr);
      grid-template-areas: 'head head' 'media aside';
      align-items: center;
    }
    .lib-shop-the-look[data-list='side'][data-image-width='half'] .lib-shop-the-look__inner { --lib-media-col: 2fr; }
    .lib-shop-the-look[data-list='side'][data-image-width='wide'] .lib-shop-the-look__inner { --lib-media-col: 4fr; }
    .lib-shop-the-look[data-list='side'][data-image='right'] .lib-shop-the-look__inner {
      grid-template-columns: minmax(0, 2fr) minmax(0, var(--lib-media-col));
      grid-template-areas: 'head head' 'aside media';
    }
  }
  .lib-shop-the-look__header { grid-area: head; }
  .lib-shop-the-look__media { grid-area: media; }
  .lib-shop-the-look__aside { grid-area: aside; min-width: 0; }

  /* Header alignment: desktop, then mobile override. */
  .lib-shop-the-look__header { text-align: left; }
  .lib-shop-the-look__header[data-align='center'] { text-align: center; }
  .lib-shop-the-look__header[data-align='right'] { text-align: right; }
  @media (max-width: 749px) {
    .lib-shop-the-look__header[data-align-m='left'] { text-align: left; }
    .lib-shop-the-look__header[data-align-m='center'] { text-align: center; }
    .lib-shop-the-look__header[data-align-m='right'] { text-align: right; }
  }
  .lib-shop-the-look__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-shop-the-look__heading--small { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .lib-shop-the-look__heading--large { font-size: clamp(2rem, 4.4vw, 3.5rem); }
  .lib-shop-the-look__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lib-shop-the-look__text { max-width: 40rem; margin-top: 0.85rem; font-size: 1.0625rem; line-height: 1.6; opacity: 0.75; }
  .lib-shop-the-look__header[data-align='center'] .lib-shop-the-look__text { margin-inline: auto; }
  .lib-shop-the-look__header[data-align='right'] .lib-shop-the-look__text { margin-inline-start: auto; }
  .lib-shop-the-look__text > :first-child { margin-top: 0; }
  .lib-shop-the-look__text > :last-child { margin-bottom: 0; }

  /* Image with hotspots. Dots and cards sit outside the clipped frame so cards are never cut off. */
  .lib-shop-the-look__media { position: relative; }
  .lib-shop-the-look__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--lib-radius-img);
    background: color-mix(in srgb, var(--lib-text) 6%, transparent);
  }
  .lib-shop-the-look__frame[data-ratio='square'] { aspect-ratio: 1; }
  .lib-shop-the-look__frame[data-ratio='portrait'] { aspect-ratio: 4 / 5; }
  .lib-shop-the-look__frame[data-ratio='landscape'] { aspect-ratio: 3 / 2; }
  .lib-shop-the-look__frame[data-ratio='wide'] { aspect-ratio: 16 / 9; }
  .lib-shop-the-look__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-shop-the-look__frame[data-ratio='adapt'] .lib-shop-the-look__img { height: auto; }
  @media (max-width: 749px) {
    .lib-shop-the-look__frame[data-ratio-m='adapt'] { aspect-ratio: auto; }
    .lib-shop-the-look__frame[data-ratio-m='square'] { aspect-ratio: 1; }
    .lib-shop-the-look__frame[data-ratio-m='portrait'] { aspect-ratio: 4 / 5; }
    .lib-shop-the-look__frame[data-ratio-m='landscape'] { aspect-ratio: 3 / 2; }
    .lib-shop-the-look__frame[data-ratio-m='wide'] { aspect-ratio: 16 / 9; }
    .lib-shop-the-look__frame[data-ratio-m='adapt'] .lib-shop-the-look__img { height: auto; }
    .lib-shop-the-look__frame:not([data-ratio-m='adapt']) .lib-shop-the-look__img { height: 100%; }
  }
  .lib-shop-the-look__frame svg.lib-shop-the-look__img {
    aspect-ratio: 3 / 2;
    fill: color-mix(in srgb, var(--lib-text) 22%, transparent);
  }

  .lib-shop-the-look__dot {
    position: absolute;
    z-index: 1;
    left: var(--x);
    top: var(--y);
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: var(--lib-dot);
    height: var(--lib-dot);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lib-hotspot);
    color: var(--lib-hotspot-icon);
    font: inherit;
    font-size: calc(var(--lib-dot) * 0.42);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.28);
    transition: transform 0.2s ease;
  }
  @media (max-width: 749px) {
    .lib-shop-the-look__dot { left: var(--xm); top: var(--ym); }
  }
  /* Larger invisible hit area for touch. */
  .lib-shop-the-look__dot::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
  .lib-shop-the-look[data-pulse] .lib-shop-the-look__dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: lib-shop-the-look-pulse 2.2s infinite;
  }
  @keyframes lib-shop-the-look-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lib-hotspot) 70%, transparent); }
    70%, 100% { box-shadow: 0 0 0 12px transparent; }
  }
  .lib-shop-the-look__dot:hover,
  .lib-shop-the-look__dot.is-hint,
  .lib-shop-the-look__dot[aria-expanded='true'] { transform: scale(1.12); }
  .lib-shop-the-look__dot[aria-expanded='true'] { z-index: 3; }
  .lib-shop-the-look__dot:focus-visible {
    outline: 2px solid var(--lib-hotspot-icon);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--lib-hotspot);
  }
  .lib-shop-the-look__dot-core { width: 34%; height: 34%; border-radius: 50%; background: currentColor; }
  .lib-shop-the-look__dot-plus { transition: transform 0.2s ease; }
  .lib-shop-the-look__dot[aria-expanded='true'] .lib-shop-the-look__dot-plus { transform: rotate(45deg); }

  .lib-shop-the-look__card {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    width: 17rem;
    max-width: calc(100% - 16px);
    padding: 0.75rem 2rem 0.75rem 0.75rem;
    border-radius: 12px;
    background: var(--lib-card);
    color: var(--lib-card-text);
    box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.04);
    animation: lib-shop-the-look-in 0.18s ease-out;
  }
  .lib-shop-the-look__card[hidden] { display: none; }
  @media (max-width: 749px) {
    .lib-shop-the-look__card { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.7rem; width: 16rem; padding: 0.6rem 2rem 0.6rem 0.6rem; }
  }
  @keyframes lib-shop-the-look-in {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
  }
  .lib-shop-the-look__card-media {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--lib-card-text) 6%, transparent);
  }
  .lib-shop-the-look__thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-shop-the-look__thumb--ph { fill: color-mix(in srgb, currentColor 25%, transparent); }
  .lib-shop-the-look__card-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
  .lib-shop-the-look__card-title { margin: 0; font-weight: 600; line-height: 1.3; }
  .lib-shop-the-look__card-link {
    margin-top: 0.35rem;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
  .lib-shop-the-look__card-link:focus-visible,
  .lib-shop-the-look__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
  .lib-shop-the-look__close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
  }
  .lib-shop-the-look__close:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }

  .lib-shop-the-look__label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .lib-shop-the-look__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    font-size: 0.9375rem;
  }
  .lib-shop-the-look__price-now--sale { color: var(--lib-sale); font-weight: 600; }
  .lib-shop-the-look__price-was { opacity: 0.55; font-size: 0.875em; }
  .lib-shop-the-look__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Product list: plain HTML, so it works without JavaScript. */
  .lib-shop-the-look__list-title {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .lib-shop-the-look__list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 750px) {
    .lib-shop-the-look[data-list='below'] .lib-shop-the-look__list {
      grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    }
  }
  @media (min-width: 750px) and (max-width: 989px) {
    .lib-shop-the-look[data-list='side'] .lib-shop-the-look__list {
      grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    }
  }
  .lib-shop-the-look__item-link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 0.9rem 0.6rem 0.6rem;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-text) 12%, transparent);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  .lib-shop-the-look__item-link:hover,
  .lib-shop-the-look__item.is-active .lib-shop-the-look__item-link {
    background: color-mix(in srgb, var(--lib-accent) 7%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--lib-accent);
  }
  .lib-shop-the-look__item-link:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 2px; }
  .lib-shop-the-look__item-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--lib-hotspot);
    color: var(--lib-hotspot-icon);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lib-text) 15%, transparent);
  }
  .lib-shop-the-look__item-media {
    flex: none;
    width: 4rem;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--lib-text) 6%, transparent);
  }
  .lib-shop-the-look__item-body { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; min-width: 0; }
  .lib-shop-the-look__item-title { font-weight: 600; line-height: 1.3; }
  .lib-shop-the-look__item-arrow { flex: none; opacity: 0.5; transition: transform 0.2s ease, opacity 0.2s ease; }
  .lib-shop-the-look__item-link:hover .lib-shop-the-look__item-arrow { opacity: 1; transform: translateX(3px); }
  .lib-shop-the-look__actions { margin-top: 1.5rem; }

  @media (prefers-reduced-motion: reduce) {
    .lib-shop-the-look[data-pulse] .lib-shop-the-look__dot::before,
    .lib-shop-the-look__card { animation: none; }
    .lib-shop-the-look__dot,
    .lib-shop-the-look__dot-plus,
    .lib-shop-the-look__item-link,
    .lib-shop-the-look__item-arrow { transition: none; }
    .lib-shop-the-look__item-link:hover .lib-shop-the-look__item-arrow { transform: none; }
  }
{% endstylesheet %}

{% javascript %}
  if (!customElements.get('lib-shop-the-look-hotspots')) {
    customElements.define(
      'lib-shop-the-look-hotspots',
      class extends HTMLElement {
        connectedCallback() {
          this.media = this.querySelector('.lib-shop-the-look__media');
          this.dots = [...this.querySelectorAll('.lib-shop-the-look__dot')];
          this.items = [...this.querySelectorAll('.lib-shop-the-look__item')];
          if (!this.media || !this.dots.length || this.onDocClick) return;
          this.current = null;

          this.dots.forEach((dot) => dot.addEventListener('click', () => this.toggle(dot)));
          this.querySelectorAll('.lib-shop-the-look__close').forEach((btn) =>
            btn.addEventListener('click', () => this.close(true))
          );
          // Hovering or focusing a list item hints at its dot.
          this.items.forEach((item) => {
            const dot = this.dots.find((d) => d.getAttribute('aria-controls') === item.dataset.for);
            if (!dot) return;
            const on = () => dot.classList.add('is-hint');
            const off = () => dot.classList.remove('is-hint');
            item.addEventListener('pointerenter', on);
            item.addEventListener('pointerleave', off);
            item.addEventListener('focusin', on);
            item.addEventListener('focusout', off);
          });

          this.onDocClick = (e) => {
            if (!this.current) return;
            const { dot, card } = this.current;
            if (!card.contains(e.target) && !dot.contains(e.target)) this.close(false);
          };
          this.onKey = (e) => {
            if (e.key === 'Escape' && this.current) this.close(true);
          };
          this.onResize = () => {
            if (this.current) this.place(this.current.dot, this.current.card);
          };
          document.addEventListener('click', this.onDocClick);
          document.addEventListener('keydown', this.onKey);
          window.addEventListener('resize', this.onResize);
        }

        disconnectedCallback() {
          if (!this.onDocClick) return;
          document.removeEventListener('click', this.onDocClick);
          document.removeEventListener('keydown', this.onKey);
          window.removeEventListener('resize', this.onResize);
          this.onDocClick = null;
        }

        toggle(dot) {
          const wasOpen = this.current && this.current.dot === dot;
          this.close(false);
          if (!wasOpen) this.open(dot);
        }

        open(dot) {
          const id = dot.getAttribute('aria-controls');
          const card = id ? document.getElementById(id) : null;
          if (!card) return;
          card.hidden = false;
          dot.setAttribute('aria-expanded', 'true');
          this.current = { dot, card };
          this.place(dot, card);
          this.items.forEach((item) => item.classList.toggle('is-active', item.dataset.for === id));
        }

        close(returnFocus) {
          if (!this.current) return;
          const { dot, card } = this.current;
          card.hidden = true;
          dot.setAttribute('aria-expanded', 'false');
          this.current = null;
          this.items.forEach((item) => item.classList.remove('is-active'));
          if (returnFocus) dot.focus();
        }

        // Puts the card beside the dot on the side with room (right first when the dot is in the
        // left half). When neither side fits, it drops below or above the dot. Always kept inside the image.
        place(dot, card) {
          const m = this.media.getBoundingClientRect();
          const d = dot.getBoundingClientRect();
          const pad = 8;
          const gap = d.width / 2 + 10;
          const cx = d.left + d.width / 2 - m.left;
          const cy = d.top + d.height / 2 - m.top;
          const w = card.offsetWidth;
          const h = card.offsetHeight;
          const fitsRight = cx + gap + w <= m.width - pad;
          const fitsLeft = cx - gap - w >= pad;
          const clamp = (v, max) => Math.max(pad, Math.min(v, Math.max(pad, max)));
          let x;
          let y;
          if (fitsRight || fitsLeft) {
            x = fitsRight && (cx <= m.width / 2 || !fitsLeft) ? cx + gap : cx - gap - w;
            y = clamp(cy - h / 2, m.height - h - pad);
          } else if (cy + gap + h <= m.height - pad) {
            x = cx - w / 2;
            y = cy + gap;
          } else if (cy - gap - h >= pad) {
            x = cx - w / 2;
            y = cy - gap - h;
          } else {
            // Small image (usually mobile): hang the card below the dot, past the image edge,
            // rather than covering the dot.
            x = cx - w / 2;
            y = cy + gap;
          }
          card.style.left = `${clamp(x, m.width - w - pad)}px`;
          card.style.top = `${Math.round(y)}px`;
        }
      }
    );
  }
{% endjavascript %}

{% schema %}
{
  "name": "Lib · Shop the look",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 6,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Shop the <em>living room</em>" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "xlarge", "label": "Extra large" }
      ],
      "default": "medium"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Soft textures, warm light and a few handmade pieces. Tap a dot to see what is in the room.</p>" },
    { "type": "text", "id": "list_title", "label": "Product list title", "default": "In this room" },
    { "type": "text", "id": "card_link_label", "label": "Product card link label", "default": "View product" },

    { "type": "header", "content": "Image" },
    { "type": "image_picker", "id": "image", "label": "Desktop image" },
    {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Mobile image",
      "info": "Optional. Shown below 750px. If it is cropped differently, set mobile positions on each hotspot."
    },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image shape on desktop",
      "info": "Hotspot positions are measured on the image as shown. Adapt keeps the whole image, so dots stay on their objects.",
      "options": [
        { "value": "adapt", "label": "Adapt to image" },
        { "value": "wide", "label": "Wide (16:9)" },
        { "value": "landscape", "label": "Landscape (3:2)" },
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait (4:5)" }
      ],
      "default": "adapt"
    },
    {
      "type": "select",
      "id": "image_ratio_mobile",
      "label": "Image shape on mobile",
      "options": [
        { "value": "adapt", "label": "Adapt to image" },
        { "value": "wide", "label": "Wide (16:9)" },
        { "value": "landscape", "label": "Landscape (3:2)" },
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait (4:5)" }
      ],
      "default": "adapt"
    },
    { "type": "range", "id": "image_radius", "label": "Image corner radius", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 16 },

    { "type": "header", "content": "Hotspots" },
    {
      "type": "select",
      "id": "hotspot_style",
      "label": "Hotspot style",
      "options": [
        { "value": "dot", "label": "Dot" },
        { "value": "plus", "label": "Plus" },
        { "value": "number", "label": "Number (also shown in the list)" }
      ],
      "default": "plus"
    },
    { "type": "range", "id": "hotspot_size", "label": "Hotspot size", "min": 24, "max": 48, "step": 2, "unit": "px", "default": 32 },
    { "type": "color", "id": "color_hotspot", "label": "Hotspot color", "default": "#FFFFFF" },
    { "type": "color", "id": "color_hotspot_icon", "label": "Hotspot icon color", "default": "#1C1917" },

    { "type": "header", "content": "Product card and list" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FFFFFF" },
    { "type": "color", "id": "color_card_text", "label": "Card text", "default": "#1C1917" },

    { "type": "header", "content": "Button" },
    { "type": "text", "id": "button_label", "label": "Button label", "info": "Optional. Shown under the product list.", "default": "Shop the collection" },
    { "type": "url", "id": "button_url", "label": "Button link" },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "outline"
    },
    { "type": "checkbox", "id": "button_new_tab", "label": "Open link in a new tab", "default": false },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    {
      "type": "select",
      "id": "list_position",
      "label": "Product list on desktop",
      "info": "On mobile the list always sits below the image.",
      "options": [
        { "value": "side", "label": "Next to the image" },
        { "value": "below", "label": "Below the image" }
      ],
      "default": "side"
    },
    {
      "type": "select",
      "id": "image_position",
      "label": "Image position",
      "visible_if": "{{ section.settings.list_position == 'side' }}",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "image_width",
      "label": "Image width",
      "visible_if": "{{ section.settings.list_position == 'side' }}",
      "options": [
        { "value": "half", "label": "Half" },
        { "value": "default", "label": "Three fifths" },
        { "value": "wide", "label": "Two thirds" }
      ],
      "default": "default"
    },
    { "type": "text_alignment", "id": "text_alignment", "label": "Heading alignment on desktop", "default": "left" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Heading alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#F5F2EC" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#1C1917" },
    { "type": "color", "id": "color_accent", "label": "Accent (active product, solid button)", "default": "#1C1917" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#F5F2EC" },
    { "type": "color", "id": "color_sale", "label": "Sale price", "default": "#B4432F" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 80 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 80 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 48 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "pulse", "label": "Pulse the hotspots", "default": true }
  ],
  "blocks": [
    {
      "type": "hotspot",
      "name": "Product hotspot",
      "limit": 6,
      "settings": [
        { "type": "product", "id": "product", "label": "Product" },
        { "type": "text", "id": "label", "label": "Label", "info": "Optional. A short word above the title, e.g. Throw." },
        { "type": "range", "id": "x", "label": "Horizontal position", "min": 0, "max": 100, "step": 1, "unit": "%", "default": 50 },
        { "type": "range", "id": "y", "label": "Vertical position", "min": 0, "max": 100, "step": 1, "unit": "%", "default": 50 },
        { "type": "checkbox", "id": "mobile_custom", "label": "Different position on mobile", "default": false },
        {
          "type": "range",
          "id": "x_mobile",
          "label": "Horizontal position on mobile",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "default": 50,
          "visible_if": "{{ block.settings.mobile_custom }}"
        },
        {
          "type": "range",
          "id": "y_mobile",
          "label": "Vertical position on mobile",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "default": 50,
          "visible_if": "{{ block.settings.mobile_custom }}"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Shop the look",
      "blocks": [
        { "type": "hotspot", "settings": { "label": "Throw", "x": 34, "y": 62 } },
        { "type": "hotspot", "settings": { "label": "Table lamp", "x": 80, "y": 50 } },
        { "type": "hotspot", "settings": { "label": "Vase", "x": 89, "y": 64 } }
      ]
    }
  ]
}
{% endschema %}