easyorders 0.1.15 → 0.1.16

package/dist/template/theme/home-sections/shop-the-look/template.liquid

@@ -1,304 +1,326 @@
-<section
-  class="shop-the-look shop-the-look--{{ section_data.surface | default: 'cream' }}"
-  style="--stl-accent: {{ section_data.accent_color | default: '#C9A962' }};"
->
-  <header class="shop-the-look__head">
-    {% if section_data.eyebrow != blank %}
-      <p class="shop-the-look__eyebrow">{{ section_data.eyebrow }}</p>
-    {% endif %}
-    {% if section_data.title != blank %}
-      <h2 class="shop-the-look__title">{{ section_data.title }}</h2>
-    {% endif %}
-    {% if section_data.subtitle != blank %}
-      <p class="shop-the-look__subtitle">{{ section_data.subtitle }}</p>
-    {% endif %}
-  </header>
-
-  <div class="shop-the-look__layout">
-    <a class="shop-the-look__hero" href="{{ section_data.look_url | default: '/products' }}">
-      <div class="shop-the-look__hero-visual">
-        {% if section_data.look_image != blank %}
-          <img
-            class="shop-the-look__hero-img"
-            src="{{ section_data.look_image }}"
-            alt="{{ section_data.look_title | default: 'Look' }}"
-            loading="lazy"
-            width="900"
-            height="1120"
-          >
-        {% else %}
-          <div class="shop-the-look__hero-placeholder" aria-hidden="true"></div>
-        {% endif %}
-        <div class="shop-the-look__hero-shade" aria-hidden="true"></div>
-      </div>
-      <div class="shop-the-look__hero-copy">
-        {% if section_data.look_title != blank %}
-          <span class="shop-the-look__hero-title">{{ section_data.look_title }}</span>
-        {% endif %}
-        {% if section_data.look_caption != blank %}
-          <span class="shop-the-look__hero-caption">{{ section_data.look_caption }}</span>
-        {% endif %}
-        {% if section_data.look_cta_label != blank %}
-          <span class="shop-the-look__hero-cta">{{ section_data.look_cta_label }}</span>
-        {% endif %}
-      </div>
-    </a>
-
-    <div
-      class="shop-the-look__picks eo-hs{% if section_data.pick_product_ids == blank or section_data.pick_product_ids.size == 0 %} eo-hs--empty{% endif %}"
-      data-eo-hs-entity="products"
-      data-eo-hs-ids="{{ section_data.pick_product_ids | join: ',' | strip }}"
-    >
-      <div class="shop-the-look__picks-inner" data-eo-hs-mount>
-        {% if section_data.pick_product_ids and section_data.pick_product_ids.size > 0 %}
-          {% for id in section_data.pick_product_ids %}
-            <div class="eo-hs-skeleton eo-hs-skeleton--product" aria-hidden="true"></div>
-          {% endfor %}
-        {% else %}
-          <p class="shop-the-look__picks-empty">Add products in the section settings to list pieces from this look.</p>
-        {% endif %}
-      </div>
-    </div>
-  </div>
-</section>
-
-<style>
-  .shop-the-look {
-    padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
-  }
-  .shop-the-look--cream {
-    background: #f3efe8;
-    color: #1c1a17;
-  }
-  .shop-the-look--charcoal {
-    background: #1e1c24;
-    color: #f4eee6;
-  }
-  .shop-the-look__head {
-    max-width: 40rem;
-    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
-  }
-  .shop-the-look__eyebrow {
-    margin: 0 0 0.4rem;
-    font-size: 0.7rem;
-    font-weight: 600;
-    letter-spacing: 0.28em;
-    text-transform: uppercase;
-    color: var(--stl-accent, #c9a962);
-  }
-  .shop-the-look__title {
-    margin: 0 0 0.5rem;
-    font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-    font-weight: 500;
-    font-size: clamp(1.75rem, 4vw, 2.35rem);
-    line-height: 1.15;
-  }
-  .shop-the-look__subtitle {
-    margin: 0;
-    font-size: 1rem;
-    line-height: 1.65;
-    opacity: 0.82;
-  }
-  .shop-the-look__layout {
-    max-width: 1160px;
-    margin: 0 auto;
-    display: grid;
-    gap: clamp(1.25rem, 3vw, 2rem);
-    align-items: stretch;
-  }
-  @media (min-width: 960px) {
-    .shop-the-look__layout {
-      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
-    }
-  }
-  .shop-the-look__hero {
-    position: relative;
-    display: block;
-    border-radius: 8px;
-    overflow: hidden;
-    text-decoration: none;
-    color: inherit;
-    min-height: clamp(300px, 52vh, 540px);
-    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
-    transition: transform 0.25s ease, box-shadow 0.25s ease;
-  }
-  .shop-the-look--charcoal .shop-the-look__hero {
-    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
-  }
-  .shop-the-look__hero:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.18);
-  }
-  .shop-the-look__hero-visual {
-    position: absolute;
-    inset: 0;
-  }
-  .shop-the-look__hero-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-  .shop-the-look__hero-placeholder {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, #c4bbb0, #8a8278);
-  }
-  .shop-the-look--charcoal .shop-the-look__hero-placeholder {
-    background: linear-gradient(135deg, #3d3848, #1a1820);
-  }
-  .shop-the-look__hero-shade {
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(to top, rgba(12, 10, 14, 0.88) 0%, transparent 55%);
-    pointer-events: none;
-  }
-  .shop-the-look__hero-copy {
-    position: relative;
-    z-index: 1;
-    padding: clamp(1.25rem, 3vw, 2rem);
-    display: flex;
-    flex-direction: column;
-    gap: 0.35rem;
-    align-items: flex-start;
-    justify-content: flex-end;
-    min-height: 100%;
-    color: #faf7f2;
-  }
-  .shop-the-look__hero-title {
-    font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-    font-size: clamp(1.35rem, 3vw, 1.85rem);
-    font-weight: 500;
-  }
-  .shop-the-look__hero-caption {
-    font-size: 0.92rem;
-    line-height: 1.5;
-    opacity: 0.88;
-    max-width: 26rem;
-  }
-  .shop-the-look__hero-cta {
-    margin-top: 0.5rem;
-    display: inline-flex;
-    padding: 0.55rem 1.2rem;
-    border-radius: 999px;
-    font-size: 0.68rem;
-    font-weight: 700;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    background: var(--stl-accent, #c9a962);
-    color: #141218;
-  }
-  .shop-the-look__picks {
-    min-width: 0;
-  }
-  .shop-the-look__picks-empty {
-    margin: 0;
-    font-size: 0.88rem;
-    line-height: 1.5;
-    opacity: 0.75;
-    padding: 0.5rem 0;
-  }
-  .shop-the-look__picks-inner {
-    display: flex;
-    flex-direction: column;
-    gap: 0.85rem;
-  }
-  .shop-the-look__picks-inner.eo-hs-loading {
-    opacity: 0.85;
-  }
-  @media (max-width: 959px) {
-    .shop-the-look__picks-inner {
-      flex-flow: row nowrap;
-      overflow-x: auto;
-      padding-bottom: 0.35rem;
-      scroll-snap-type: x mandatory;
-      -webkit-overflow-scrolling: touch;
-    }
-    .shop-the-look__picks-inner .eo-hs-card--product {
-      flex: 0 0 min(220px, 72vw);
-      scroll-snap-align: start;
-    }
-  }
-  .shop-the-look__picks-inner .eo-hs-skeleton--product {
-    min-height: 96px;
-    border-radius: 8px;
-    background: linear-gradient(110deg, #ece8e2 8%, #f5f2ee 18%, #ece8e2 33%);
-    background-size: 200% 100%;
-    animation: shop-the-look-shimmer 1.2s ease-in-out infinite;
-  }
-  .shop-the-look--charcoal .shop-the-look__picks-inner .eo-hs-skeleton--product {
-    background: linear-gradient(110deg, #2a2630 8%, #3a3540 18%, #2a2630 33%);
-    background-size: 200% 100%;
-  }
-  .shop-the-look__picks-inner .eo-hs-card--product {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.85rem;
-    text-decoration: none;
-    color: inherit;
-    padding: 0.65rem;
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.55);
-    border: 1px solid rgba(28, 26, 23, 0.06);
-    transition: background 0.2s ease, transform 0.2s ease;
-  }
-  .shop-the-look--charcoal .shop-the-look__picks-inner .eo-hs-card--product {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.08);
-  }
-  .shop-the-look__picks-inner .eo-hs-card--product:hover {
-    background: rgba(255, 255, 255, 0.85);
-    transform: translateX(2px);
-  }
-  .shop-the-look--charcoal .shop-the-look__picks-inner .eo-hs-card--product:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__media {
-    flex-shrink: 0;
-    width: 76px;
-    height: 96px;
-    border-radius: 4px;
-    overflow: hidden;
-    aspect-ratio: unset;
-  }
-  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__media--empty {
-    min-height: 96px;
-    background: #ddd8d0;
-  }
-  .shop-the-look--charcoal .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__media--empty {
-    background: #2a2630;
-  }
-  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-    min-width: 0;
-    padding: 0;
-  }
-  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__title {
-    font-size: 0.9rem;
-    font-weight: 600;
-    line-height: 1.35;
-  }
-  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__meta {
-    font-size: 0.82rem;
-    opacity: 0.75;
-    letter-spacing: 0.03em;
-  }
-  .shop-the-look__picks .eo-hs-error {
-    margin: 0;
-    font-size: 0.86rem;
-    color: #8b3225;
-    text-align: center;
-    padding: 0.5rem 0;
-  }
-  @keyframes shop-the-look-shimmer {
-    0% {
-      background-position: 100% 0;
-    }
-    100% {
-      background-position: -100% 0;
-    }
-  }
-</style>
+<section
+  class="eo-home-section shop-the-look shop-the-look--{{ section_data.surface | default: 'cream' }}"
+  {% if section_data.enable_animation != false %}data-section-anim="{{ section_data.animation_style | default: 'fade-up' }}"{% endif %}
+  style="
+    --stl-accent: {{ section_data.accent_color | default: '#C9A962' }};
+    --stl-card-bg: {{ section_data.card_bg_color | default: '' }};
+    --stl-card-title: {{ section_data.card_title_color | default: '' }};
+    --stl-card-price: {{ section_data.card_price_color | default: '' }};
+    --stl-card-old-price: {{ section_data.card_old_price_color | default: '' }};
+    {% if section_data.heading_title_color != blank %}--stl-head-title-color: {{ section_data.heading_title_color }};{% endif %}
+    --stl-head-title-size: {{ section_data.heading_title_size | default: 38 }}px;
+    --stl-head-title-weight: {{ section_data.heading_title_weight | default: '500' }};
+    {% if section_data.heading_subtitle_color != blank %}--stl-head-subtitle-color: {{ section_data.heading_subtitle_color }};--stl-head-subtitle-opacity: 1;{% endif %}
+    --stl-head-subtitle-size: {{ section_data.heading_subtitle_size | default: 16 }}px;
+    --stl-head-subtitle-weight: {{ section_data.heading_subtitle_weight | default: '400' }};
+  "
+>
+  <header class="shop-the-look__head ab-anim-el">
+    {% if section_data.eyebrow != blank %}
+      <p class="shop-the-look__eyebrow">{{ section_data.eyebrow }}</p>
+    {% endif %}
+    {% if section_data.title != blank %}
+      <h2 class="shop-the-look__title">{{ section_data.title }}</h2>
+    {% endif %}
+    {% if section_data.subtitle != blank %}
+      <p class="shop-the-look__subtitle">{{ section_data.subtitle }}</p>
+    {% endif %}
+  </header>
+
+  <div class="shop-the-look__layout">
+    <a class="shop-the-look__hero ab-anim-el" href="{{ section_data.look_url | default: '/products' }}">
+      <div class="shop-the-look__hero-visual">
+        {% if section_data.look_image != blank %}
+          <img
+            class="shop-the-look__hero-img"
+            src="{{ section_data.look_image }}"
+            alt="{{ section_data.look_title | default: 'Look' }}"
+            loading="lazy"
+            width="900"
+            height="1120"
+          >
+        {% else %}
+          <div class="shop-the-look__hero-placeholder" aria-hidden="true"></div>
+        {% endif %}
+        <div class="shop-the-look__hero-shade" aria-hidden="true"></div>
+      </div>
+      <div class="shop-the-look__hero-copy">
+        {% if section_data.look_title != blank %}
+          <span class="shop-the-look__hero-title">{{ section_data.look_title }}</span>
+        {% endif %}
+        {% if section_data.look_caption != blank %}
+          <span class="shop-the-look__hero-caption">{{ section_data.look_caption }}</span>
+        {% endif %}
+        {% if section_data.look_cta_label != blank %}
+          <span class="shop-the-look__hero-cta">{{ section_data.look_cta_label }}</span>
+        {% endif %}
+      </div>
+    </a>
+
+    <div
+      class="shop-the-look__picks eo-hs ab-anim-el{% if section_data.pick_product_ids == blank or section_data.pick_product_ids.size == 0 %} eo-hs--empty{% endif %}"
+      data-eo-hs-entity="products"
+      data-eo-hs-ids="{{ section_data.pick_product_ids | join: ',' | strip }}"
+      data-eo-hs-currency="{{ currency }}"
+    >
+      <div class="shop-the-look__picks-inner" data-eo-hs-mount>
+        {% if section_data.pick_product_ids and section_data.pick_product_ids.size > 0 %}
+          {% for id in section_data.pick_product_ids %}
+            <div class="eo-hs-skeleton eo-hs-skeleton--product" aria-hidden="true"></div>
+          {% endfor %}
+        {% else %}
+          <p class="shop-the-look__picks-empty">Add products in the section settings to list pieces from this look.</p>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .shop-the-look {
+    padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
+  }
+  .shop-the-look--cream {
+    background: #f3efe8;
+    margin-block: 15px;
+    color: #1c1a17;
+  }
+  .shop-the-look--charcoal {
+    background: #1e1c24;
+    color: #f4eee6;
+  }
+  .shop-the-look__head {
+        max-width: 1160px;
+    margin: 0 auto 30px;
+  }
+  .shop-the-look__eyebrow {
+    margin: 0 0 0.4rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+    color: var(--stl-accent, #c9a962);
+  }
+  .shop-the-look__title {
+    margin: 0 0 0.5rem;
+    font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+    font-weight: var(--stl-head-title-weight, 500);
+    font-size: clamp(1.25rem, 3vw, var(--stl-head-title-size, 38px));
+    line-height: 1.15;
+    color: var(--stl-head-title-color, inherit);
+  }
+  .shop-the-look__subtitle {
+    margin: 0;
+    font-size: var(--stl-head-subtitle-size, 16px);
+    font-weight: var(--stl-head-subtitle-weight, 400);
+    line-height: 1.65;
+    opacity: var(--stl-head-subtitle-opacity, 0.82);
+    color: var(--stl-head-subtitle-color, inherit);
+  }
+  .shop-the-look__layout {
+    max-width: 1160px;
+    margin: 0 auto;
+    display: grid;
+    gap: clamp(1.25rem, 3vw, 2rem);
+    align-items: stretch;
+  }
+  @media (min-width: 960px) {
+    .shop-the-look__layout {
+      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
+    }
+  }
+  .shop-the-look__hero {
+    position: relative;
+    display: block;
+    border-radius: 8px;
+    overflow: hidden;
+    text-decoration: none;
+    color: inherit;
+    min-height: clamp(300px, 60vh, 540px);
+     transition: transform 0.25s ease, box-shadow 0.25s ease;
+  }
+  .shop-the-look--charcoal .shop-the-look__hero {
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
+  }
+  .shop-the-look__hero:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.18);
+  }
+  .shop-the-look__hero-visual {
+    position: absolute;
+    inset: 0;
+  }
+  .shop-the-look__hero-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .shop-the-look__hero-placeholder {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #c4bbb0, #8a8278);
+  }
+  .shop-the-look--charcoal .shop-the-look__hero-placeholder {
+    background: linear-gradient(135deg, #3d3848, #1a1820);
+  }
+  .shop-the-look__hero-shade {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, rgba(12, 10, 14, 0.88) 0%, transparent 55%);
+    pointer-events: none;
+  }
+  .shop-the-look__hero-copy {
+    position: relative;
+    z-index: 1;
+    padding: clamp(1.25rem, 3vw, 2rem);
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    align-items: flex-start;
+    justify-content: flex-end;
+    min-height: 100%;
+    color: #faf7f2;
+  }
+  .shop-the-look__hero-title {
+    font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+    font-size: clamp(1.35rem, 3vw, 1.85rem);
+    font-weight: 500;
+  }
+  .shop-the-look__hero-caption {
+    font-size: 0.92rem;
+    line-height: 1.5;
+    opacity: 0.88;
+    max-width: 26rem;
+  }
+  .shop-the-look__hero-cta {
+    margin-top: 0.5rem;
+    display: inline-flex;
+    padding: 0.55rem 1.2rem;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    background: var(--stl-accent, #c9a962);
+    color: #141218;
+  }
+  .shop-the-look__picks {
+    min-width: 0;
+  }
+  .shop-the-look__picks-empty {
+    margin: 0;
+    font-size: 0.88rem;
+    line-height: 1.5;
+    opacity: 0.75;
+    padding: 0.5rem 0;
+  }
+  .shop-the-look__picks-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
+  }
+  .shop-the-look__picks-inner.eo-hs-loading {
+    opacity: 0.85;
+  }
+  @media (max-width: 959px) {
+    .shop-the-look__picks-inner {
+       overflow-x: auto;
+      padding-bottom: 0.35rem;
+      scroll-snap-type: x mandatory;
+      -webkit-overflow-scrolling: touch;
+    }
+    .shop-the-look__picks-inner .eo-hs-card--product {
+      flex: 0 0 min(140px, 72vw);
+      scroll-snap-align: start;
+    }
+  }
+  .shop-the-look__picks-inner .eo-hs-skeleton--product {
+    min-height: 96px;
+    border-radius: 8px;
+    background: linear-gradient(110deg, #ece8e2 8%, #f5f2ee 18%, #ece8e2 33%);
+    background-size: 200% 100%;
+    animation: shop-the-look-shimmer 1.2s ease-in-out infinite;
+  }
+  .shop-the-look--charcoal .shop-the-look__picks-inner .eo-hs-skeleton--product {
+    background: linear-gradient(110deg, #2a2630 8%, #3a3540 18%, #2a2630 33%);
+    background-size: 200% 100%;
+  }
+  .shop-the-look__picks-inner .eo-hs-card--product {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.85rem;
+    text-decoration: none;
+    color: inherit;
+    padding: 0.65rem;
+    border-radius: 8px;
+    background: var(--stl-card-bg, rgba(255, 255, 255, 0.55));
+    border: 1px solid rgba(28, 26, 23, 0.06);
+    transition: background 0.2s ease, transform 0.2s ease;
+  }
+  .shop-the-look--charcoal .shop-the-look__picks-inner .eo-hs-card--product {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+  .shop-the-look__picks-inner .eo-hs-card--product:hover {
+    background: rgba(255, 255, 255, 0.85);
+    transform: translateX(2px);
+  }
+  .shop-the-look--charcoal .shop-the-look__picks-inner .eo-hs-card--product:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__media {
+    flex-shrink: 0;
+    width: 76px;
+    height: 96px;
+    border-radius: 4px;
+    overflow: hidden;
+    aspect-ratio: unset;
+  }
+  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__media--empty {
+    min-height: 96px;
+    background: #ddd8d0;
+  }
+  .shop-the-look--charcoal .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__media--empty {
+    background: #2a2630;
+  }
+  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 0;
+    padding: 0;
+  }
+  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__title {
+    font-size: 0.9rem;
+    font-weight: 600;
+    line-height: 1.35;
+    color: var(--stl-card-title, inherit);
+  }
+  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__meta {
+    font-size: 0.82rem;
+    letter-spacing: 0.03em;
+    color: var(--stl-card-price, inherit);
+    opacity: 0.85;DISPLAY: flex;
+    GAP: 8PX;
+  }
+  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__meta del {
+    color: var(--stl-card-old-price, inherit);
+  }
+  .shop-the-look__picks .eo-hs-error {
+    margin: 0;
+    font-size: 0.86rem;
+    color: #8b3225;
+    text-align: center;
+    padding: 0.5rem 0;
+  }
+  @keyframes shop-the-look-shimmer {
+    0% {
+      background-position: 100% 0;
+    }
+    100% {
+      background-position: -100% 0;
+    }
+  }
+</style>