/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 22:9 Expected identifier but found "%"
Line 23:8 Unexpected "{"
Line 23:9 Expected identifier but found "%"
Line 24:8 Unexpected "{"
Line 24:9 Expected identifier but found "%"
Line 26:8 Unexpected "{"
Line 26:9 Expected identifier but found "%"
Line 27:10 Unexpected "<"
Line 28:13 Expected identifier but found "%"
... and 112 more hidden warnings

**/
<section class="gw-collection-wrap">
  <div class="gw-collection">

    <!-- LEFT: SIDEBAR (3 groups) -->
    <aside class="gw-col gw-sidebar">
      <nav class="gw-sidebar__nav">
        {% assign m1 = linklists[section.settings.menu_primary] %}
        {% assign m2 = linklists[section.settings.menu_middle] %}
        {% assign m3 = linklists[section.settings.menu_footer] %}

        {% if m1 %}
          <div class="gw-sidebar__group">
            {% for link in m1.links %}
              <a href="{{ link.url }}" class="gw-sidebar__link">{{ link.title }}</a>
            {% endfor %}
          </div>
        {% endif %}

        {% if m2 %}
          <div class="gw-sidebar__group gw-sidebar__group--sp1">
            {% for link in m2.links %}
              <a href="{{ link.url }}" class="gw-sidebar__link">{{ link.title }}</a>
            {% endfor %}
          </div>
        {% endif %}

        {% if m3 %}
          <div class="gw-sidebar__group gw-sidebar__group--sp2">
            {% for link in m3.links %}
              <a href="{{ link.url }}" class="gw-sidebar__link">{{ link.title }}</a>
            {% endfor %}
          </div>
        {% endif %}
      </nav>
    </aside>

    <!-- CENTER: PRODUCT GRID -->
    <main class="gw-col gw-grid-col">
      {% paginate collection.products by section.settings.per_page %}
        <div
          class="gw-grid"
          style="
            --gw-tile: {{ section.settings.tile_width | default: 520 }}px;
            --gw-scale: {{ section.settings.image_scale | default: 90 }}%;
            --gw-gap: {{ section.settings.grid_gap | default: 32 }}px;
          "
        >
          {% for product in collection.products %}
            <article class="gw-card">
              <div class="gw-media">
                <!-- PADDING FALLBACK ensures portrait (2:3) even if aspect-ratio is ignored -->
                <span class="gw-media-ratio" aria-hidden="true"></span>
                {% if product.featured_image %}
                  {{ product.featured_image
                    | image_url: width: 1400
                    | image_tag:
                        alt: product.title,
                        loading: 'lazy',
                        widths: '400,600,800,1000,1200,1400',
                        class: 'gw-media-img' }}
                {% endif %}
              </div>

              <div class="gw-card__meta">
                <span class="gw-card__name">{{ product.title }}</span>

                {%- assign v = product.selected_or_first_available_variant -%}
                {%- assign price = v.price | default: product.price -%}
                {%- assign compare = v.compare_at_price | default: product.compare_at_price_max -%}
                <span class="gw-card__price">
                  {% if compare and compare > price %}
                    <span class="gw-price--sale">{{ price | money }}</span>
                    <span class="gw-price--compare">{{ compare | money }}</span>
                  {% else %}
                    <span class="gw-price--regular">{{ price | money }}</span>
                  {% endif %}
                </span>
              </div>
            </article>
          {% endfor %}
        </div>

        {% if paginate.pages > 1 %}
          <nav class="gw-pagination">
            {% if paginate.previous %}<a href="{{ paginate.previous.url }}">Previous</a>{% endif %}
            <span class="caption">{{ paginate.current_page }} / {{ paginate.pages }}</span>
            {% if paginate.next %}<a href="{{ paginate.next.url }}">Next</a>{% endif %}
          </nav>
        {% endif %}
      {% endpaginate %}
    </main>

    <!-- RIGHT: SOCIALS -->
    <aside class="gw-col gw-socials">
      {% if section.settings.instagram_icon != blank and section.settings.instagram_url != blank %}
        <a href="{{ section.settings.instagram_url }}" target="_blank" rel="noopener" aria-label="Instagram" class="gw-social">
          <img src="{{ section.settings.instagram_icon | image_url: width: 28 }}" alt="Instagram" width="28" height="28">
        </a>
      {% endif %}
      {% if section.settings.mail_icon != blank and section.settings.email != blank %}
        <a href="mailto:{{ section.settings.email }}" aria-label="Email" class="gw-social">
          <img src="{{ section.settings.mail_icon | image_url: width: 28 }}" alt="Email" width="28" height="28">
        </a>
      {% endif %}
    </aside>

  </div>
</section>
<style>
  /* ===== PAGE LAYOUT ===== */
  .gw-collection{
    width: 100%;
    margin: 0;
    padding: 0 50px;                      /* aligns with side bars */
    display: grid;
    grid-template-columns: 160px 1fr 40px;/* left menu / content / right icons */
    gap: 24px;
    align-items: start;
  }

  .gw-grid-col{
    max-width: 1200px;                    /* keeps content tidy */
    margin: 0 auto;                       /* centers the whole grid area */
    padding-bottom: 120px;                /* room above pinned socials */
  }

  .gw-socials{
    position: fixed;
    right: 50px;
    bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1000;
  }

  /* ===== LEFT SIDEBAR ===== */
  .gw-sidebar{ position: relative; }

  .gw-sidebar__nav{
    position: fixed;
    left: 50px;
    top: 150px;          /* clear top bar */
    bottom: 50px;        /* 50px gap from bottom */
    width: 160px;
    display: flex;
    flex-direction: column;
  }
  .gw-sidebar__group{ display: flex; flex-direction: column; gap: 12px; }
  .gw-sidebar__group--sp1{ margin-top: auto; margin-bottom: auto; } /* middle */
  .gw-sidebar__group--sp2{ margin-top: auto; }                      /* bottom */
  .gw-sidebar__link{
    text-decoration: none; color:#000; font-size:12px; line-height:18px;
    letter-spacing:.05em; text-transform:uppercase;
  }
  .gw-sidebar__link:hover{ opacity:.7; }

  /* ===== GRID & CARD ===== */
  .gw-grid{
    display: grid;
    grid-template-columns: repeat(2, var(--gw-tile, 520px));
    justify-content: center;      /* centers the two tiles as a group */
    column-gap: var(--gw-gap, 32px);
    row-gap: var(--gw-gap, 32px);
  }

  .gw-card{
    width: var(--gw-tile, 520px);
    display: grid;
    grid-auto-rows: auto;
    row-gap: 14px;
  }

  /* ===== MEDIA BOX (PORTRAIT 2:3) ===== */
  .gw-media{
    position: relative;
    width: 100%;
    background: #eeeced;           /* mock’s light grey canvas */
    overflow: hidden;
    aspect-ratio: 2 / 3;
  }
  .gw-media-ratio{
    display: block;
    padding-top: 150%;             /* 2:3 = 150% */
    visibility: hidden;
  }
  .gw-media-img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--gw-scale, 90%);
    height: var(--gw-scale, 90%);
    object-fit: contain;           /* full product visible, no crop */
    object-position: center;
    display: block;
    pointer-events: none;
  }

  .gw-card__meta{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .gw-card__name{
    font-size: 16px; line-height: 24px; font-weight: 400; color:#000;
  }
  .gw-card__price{
    font-size: 18px; line-height: 24px; font-weight: 400; color:#000; white-space:nowrap;
  }
  .gw-price--compare{ text-decoration: line-through; opacity:.6; margin-left:8px; }
  .gw-price--sale{ color:#DA2727; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1100px){
    .gw-collection{ grid-template-columns: 140px 1fr 32px; }
    .gw-grid-col{ max-width: 1040px; }
    .gw-grid{ --gw-tile: 480px; }
  }
  @media (max-width: 990px){
    .gw-collection{ grid-template-columns: 1fr; padding: 0 20px; }
    .gw-sidebar, .gw-socials{ display: none; }
    .gw-grid{ grid-template-columns: 1fr 1fr; justify-content: center; --gw-tile: auto; }
  }
  @media (max-width: 640px){
    .gw-grid{ grid-template-columns: 1fr; }
  }

  /* ===== GW MOBILE DRAWER ===== */
  .gw-drawer{
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    pointer-events: none;
  }
  html.nav-open .gw-drawer,
  .gw-drawer.is-open{ display: block; pointer-events: auto; }

  .gw-drawer__overlay{
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0; transition: opacity .2s ease;
  }
  .gw-drawer__panel{
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: #fff;
    transform: translateX(100%);
    transition: transform .24s ease;
    padding: max(16px, env(safe-area-inset-top)) 24px 32px 24px;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  html.nav-open .gw-drawer__overlay,
  .gw-drawer.is-open .gw-drawer__overlay{ opacity: 1; }
  html.nav-open .gw-drawer__panel,
  .gw-drawer.is-open .gw-drawer__panel{ transform: translateX(0); }

  .gw-drawer__close{
    position: sticky; top: 10px; float: right;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 0; cursor: pointer;
    margin-right: max(0px, env(safe-area-inset-right));
  }
  .gw-drawer__close img{ display:block; width:28px; height:28px; }

  .gw-drawer__nav {
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    gap: 40px;
  }
  .gw-drawer__nav a {
    text-decoration: none;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000;
  }
  .gw-drawer__nav a.link--active { text-decoration: underline; }
  html.nav-open, .gw-drawer.is-open ~ * { overscroll-behavior: contain; }
  body:has(.gw-drawer.is-open){ overflow: hidden; }
  .gw-drawer__close img { width: 25px; height: 25px; }

  /* ===== GW — Minimal cookie banner ===== */
  .shopify-policy-banner,
  .shopify-privacy-banner,
  [data-tracking-consent-banner] {
    position: fixed !important;
    left: 50% !important;
    bottom: 16px !important;
    transform: translateX(-50%) !important;

    width: min(92vw, 520px);
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #111;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
    z-index: 9999;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #111;
    font-size: 13px;
    line-height: 1.4;
  }
  .shopify-policy-banner .banner__inner,
  .shopify-privacy-banner .banner__inner,
  [data-tracking-consent-banner] .banner__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .shopify-policy-banner h2,
  .shopify-privacy-banner h2,
  [data-tracking-consent-banner] h2 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
  }
  .shopify-policy-banner p,
  .shopify-privacy-banner p,
  [data-tracking-consent-banner] p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
  }
  .shopify-policy-banner a,
  .shopify-privacy-banner a,
  [data-tracking-consent-banner] a {
    text-decoration: underline;
    color: #111;
    font-size: 12px;
  }
  .shopify-policy-banner .banner__buttons,
  .shopify-privacy-banner .banner__buttons,
  [data-tracking-consent-banner] .banner__buttons {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 6px;
  }
  .shopify-policy-banner button,
  .shopify-privacy-banner button,
  [data-tracking-consent-banner] button {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    line-height: 1;
    border: 1px solid #111;
    background: #fff;
    color: #111;
    cursor: pointer;
  }
  .shopify-policy-banner button[data-accept-cookies],
  .shopify-privacy-banner button[data-accept-cookies],
  [data-tracking-consent-banner] button[data-accept-cookies] {
    background: #111;
    color: #fff;
    font-weight: 500;
  }
  .shopify-policy-banner button[data-decline-cookies],
  .shopify-privacy-banner button[data-decline-cookies],
  [data-tracking-consent-banner] button[data-decline-cookies] {
    background: transparent;
  }
  .shopify-policy-banner .banner__manage,
  .shopify-privacy-banner .banner__manage,
  [data-tracking-consent-banner] .banner__manage {
    font-size: 12px;
    margin-top: 4px;
    text-align: left;
  }
</style>



{% schema %}
{
  "name": "GW Collection",
  "settings": [
    { "type": "link_list", "id": "menu_primary", "label": "Sidebar – Primary group" },
    { "type": "link_list", "id": "menu_middle",  "label": "Sidebar – Middle group" },
    { "type": "link_list", "id": "menu_footer",  "label": "Sidebar – Footer group" },

    { "type": "range", "id": "columns", "label": "Desktop columns", "min": 2, "max": 4, "step": 1, "default": 2 },
    { "type": "range", "id": "per_page", "label": "Products per page", "min": 8, "max": 48, "step": 4, "default": 24 },

    { "type": "range", "id": "tile_width", "label": "Tile width (px)", "min": 440, "max": 620, "step": 10, "default": 520 },
    { "type": "range", "id": "image_scale", "label": "Image scale inside tile (%)", "min": 60, "max": 100, "step": 5, "default": 90 },
    { "type": "range", "id": "grid_gap", "label": "Grid gap (px)", "min": 16, "max": 48, "step": 4, "default": 32 },

    { "type": "image_picker", "id": "instagram_icon", "label": "Instagram icon (SVG/PNG)" },
    { "type": "url", "id": "instagram_url", "label": "Instagram URL" },
    { "type": "image_picker", "id": "mail_icon", "label": "Mail icon (SVG/PNG)" },
    { "type": "text", "id": "email", "label": "Email address" }
  ],
  "presets": [{ "name": "GW Collection (Sidebar + Grid + Socials)" }]
}
:root {
  --font-body-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

{% endschema %}