/** Shopify CDN: Minification failed

Line 16:10 Unexpected "11"
Line 43:97 Unterminated string token
Line 63:170 Unterminated string token
Line 66:21 Comments in CSS use "/* ... */" instead of "//"
Line 68:15 Comments in CSS use "/* ... */" instead of "//"
Line 70:16 Comments in CSS use "/* ... */" instead of "//"
Line 72:27 Comments in CSS use "/* ... */" instead of "//"
Line 74:14 Comments in CSS use "/* ... */" instead of "//"
Line 76:23 Comments in CSS use "/* ... */" instead of "//"
Line 78:26 Comments in CSS use "/* ... */" instead of "//"
... and 381 more hidden warnings

**/
Wednesday 11:15 AM
no theme.css that i can find but i do see base.css
Pasted text.txt
Document
1486 lines

where do i click to add headline and supporting text
found a default placeholder in the mean time
Cormorant is listed but not Cormorant Garmond
this is the current logo which needs to be changed, i was planning to replace the text with this
Edit
i have canva, so i remove the background
Untitled design.svg
File
Moments Etched.svg
File
logo-signature.svg.svg
File
logo-wordmark.svg.svg
File
that logo is quite light
logo-wordmark-dark.svg
File
Moments Etched (1).svg
File
this is where we like our MENU to be, brand new customers / referrals can see what we offer rather than hideen under Collections menu
are you talking about this products page?
still don't see it, i made the duplicate theme live, same theme from VS code and still no changes
do i create new terminal and re-run?

files pushed -- the hero image block reverted but the grid is available now

Sounds good - here is the home page now:

how do i add the 4 image cards now
is there a way to force a 2x2 grid block to capture the captions of these images. Right now it looks like this (5th photo)
perfect 
done
lets move to the next section
the image can be wider to allow the business services to be read
image is slightly cut off still the bottom blue section
almost there
Wednesday 8:49 PM
if all looks good, then lets start the next section
done
done, used 2 image placeholders for now

im ready, to add the last section, and we'll need to review the footer since all i did was delete the mailing list from previous response, this is what it looks like now 
Thursday 6:58 AM
AF APPAREL BLANKS SCRAPE ORIG(3)
Bella Canvas - https://www.t-shirtwholesaler.com/colorcharts/bella-canvas

Gildan - https://www.t-shirtwholesaler.com/colorcharts/gildan

Jerzees - https://www.t-shirtwholesaler.com/colorcharts/jerzees

Next Level Apparel - https://www.t-shirtwholesaler.com/colorcharts/next-level-apparel

Hanes - https://www.t-shirtwholesaler.com/colorcharts/hanes

Comfort Colors - https://www.t-shirtwholesaler.com/colorcharts/comfort-colors

American Apparel  - https://www.t-shirtwholesaler.com/colorcharts/american-apparel

j america - https://www.t-shirtwholesaler.com/colorcharts/j-america

LAT aparrel https://www.t-shirtwholesaler.com/colorcharts/l-a-t-apparel

flexfit - https://www.t-shirtwholesaler.com/colorcharts/flexfit

Comfortwash By Hanes - https://www.t-shirtwholesaler.com/colorcharts/comfortwash-by-hanes

AF Apparel scrap - excel attached
im not sure if you're seeing what im seeing but that main product photo is gone.
All the t-shirt color options for colors are not pulling from other variants of the 1007 or AF product colors. 
Thursday 12:19 PM
Thursday 3:29 PM
while this may take time... is it possible only for the AF products to read the color from the title? then use the swatch to that product page?
error on the page
colors are missing
VENDOR CHANGED, DO I NEED TO MAKE AN INTERNAL TAG FOR THE COLOR CARDS TO WORK?
yes that is correct

working! 
suggestion -- instead of horizontal scroll bar, to grid them or expose all the colors so the customer is aware
i see the change... i dont like this horizontal scroll though
when i select a color, is it suppose to open that specific new link?
or should the main product change? 

i do not see the color selected, just the gold color
that worked
i see the changes, im able to choose file but there is no upload.

working but when i click anyhting in print location, the page goes white.
Thursday 9:59 PM
Friday 7:04 PM
Friday 8:48 PM
Saturday 9:54 AM
actually let me provide from the DTF printer for the sizes and types of products.
i dont see 
Validation results
Print Quality report
Artwork Optimization notice
Artwork help
Saturday 1:13 PM
lets do it, this time create full files that need to be replaced.

Also this adjust your artwork, can be removed. As previously mentioned,
The shirt placement from the DTF vendor/gang sheets. For Full Front & center chest print, we'll print 3-4" down from collar, full back print will be 3" down from collar, left chest or right chest see photo, sleeves see photo, upper back will be 4" down from collar.
Saturday 5:19 PM
the view preview button if i was a user, i wouldn't have noticied.. i would have expected to have button or view on the sticky image side.

plus these uploads are quite large, the customizer/designer looks zoomed in a bit, compared to our inspirational websites.

https://momentsetched.com/products/1007-youth-premium-tee-black
i see the new change... so 1st off -- the 1st print location -- the price is not included, the base item is just for the shirt, no print included. same price as others for add on prints.

The colors swatch in the listing, when clicked, it goes to another listing and restarts the whole personalization. Any way we can resolve that when the color swatch is clicked, the sticky image changes to that swatch color?

It is also happening when i added a new product (https://momentsetched.com/products/1007-youth-premium-tee), with all the colors as variants with the front pictures, i didn't see an option to include the back or sleeve photos to the variants but the black 1007 listing has front/back/ left and right sleeve loaded to that listing if we want to use that as an example build. 

the assign artwork cards, instead of vertical (ugly), lets try horizontal maybe?
proof checkbox -- we shoud include, digital proof via email verbiage.

The color section is quite small and unable to read the colors, maybe instead of t-shirt outline, we go the circle icon with the color swatches to reduce space, when hovered the color name shows.  The in Stock listed there is hard to read, so we can move the stock status, underneath the Selected: line item.

last feedback -- the personalize this item button on the main product listing looks visually bad


Saturday 8:40 PM
looks soo much better.
the designer looks small in size like everything is zoomed out, text is harder to read
 looks the same as term as scaling -- still small. The boundary boxes also need to be re-sized. the assign artwork section - the items are cutoff.

the charcoal heather - swatch still has tshirt and not a fill like others.

also the theme of this designer needs to have a premium look as well.
looks better, the middle preview is quite wide? meaning there is a lot dead white space... maybe it will be good for other products but for apparel, it makes the shirt preview smaller?

also the designer theme still needs a theme/color design to make it look premium.

2nd screenshot has the placement - not organized and dead space, the layout could be better!

3rd screenshot looks better.

4th screenshot is with upload, the text/status looks a bit small hard to read.


5th screenshot -- attempt to add but it does scroll down on right to the checkbox.. but if was scrolled up to review color, i wont automatically see this checkbox.

Also with this section, need a prompt to say the artwork that has been uploaded, you have the rights, this is how ninja transfer does it, there are 3 top cards to review then to this copyright
see the 2 arrows

-- the top 3 cards def organizes the customization. 
the theme of this designer is still ugly

broken... look at size
Yesterday 5:50 PM
1 - upload your png -- we need to remove that.
2) -- the "no size selection is needed" but going through screens, i do not see any size selection and that is a problem
the no size selection needed is bad -- it should say size selection required.

also should the left side and right side be flipped? i find it odd the price and continue buttons on the left
Yesterday 8:45 PM
i dont see the side changes where selection should be on left and print location/preview/summary is on the right side
Still showing old view
fixed. lets move onto the next phase
Pasted code.js
JavaScript
Pasted code (2).js
JavaScript
{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign size_option_position = 0 %}

{% for option in product.options_with_values %}
  {% assign normalized_option_name = option.name | downcase | strip %}

  {% if normalized_option_name == 'size'
    or normalized_option_name == 'shirt size'
    or normalized_option_name == 'garment size'
    or normalized_option_name == 'apparel size'
  %}
    {% assign size_option_position = option.position %}
    {% break %}
  {% endif %}
{% endfor %}

{% assign product_title_downcase = product.title | downcase %}
{% assign is_1007_youth_tee = false %}

{% if product_title_downcase contains '1007'
  and product_title_downcase contains 'youth'
  and product_title_downcase contains 'tee'
%}
  {% assign is_1007_youth_tee = true %}
{% endif %}

<div
  class="me-size-picker"
  data-me-size-picker
  data-me-size-option-position="{{ size_option_position }}"
  data-me-fallback-sizes="{% if is_1007_youth_tee %}XS|S|M|L|XL{% endif %}"
>
  <div class="me-size-picker__header">
    <strong>Choose Size</strong>

    <span data-me-selected-size>
      {% if size_option_position > 0 %}
        {% case size_option_position %}
          {% when 1 %}
            Selected: {{ selected_variant.option1 }}
          {% when 2 %}
            Selected: {{ selected_variant.option2 }}
          {% when 3 %}
            Selected: {{ selected_variant.option3 }}
        {% endcase %}
      {% elsif is_1007_youth_tee %}
        Select a size
      {% else %}
        No size selection needed
      {% endif %}
    </span>
  </div>

  <div
    class="me-size-picker__grid"
    data-me-size-grid
    {% if size_option_position == 0 and is_1007_youth_tee == false %}
      hidden
    {% endif %}
  >
    {% if size_option_position > 0 %}
      {% assign rendered_sizes = '|' %}

      {% for variant in product.variants %}
        {% case size_option_position %}
          {% when 1 %}
            {% assign size_value = variant.option1 %}
          {% when 2 %}
            {% assign size_value = variant.option2 %}
          {% when 3 %}
            {% assign size_value = variant.option3 %}
        {% endcase %}

        {% assign size_token = '|' | append: size_value | append: '|' %}

        {% unless rendered_sizes contains size_token %}
          {% assign rendered_sizes = rendered_sizes
            | append: size_value
            | append: '|'
          %}

          <button
            type="button"
            class="me-size-picker__button"
            data-me-size-button
            data-size-value="{{ size_value | escape }}"
            aria-pressed="false"
          >
            <span>{{ size_value }}</span>
          </button>
        {% endunless %}
      {% endfor %}

    {% elsif is_1007_youth_tee %}
      {% assign fallback_sizes = 'XS,S,M,L,XL' | split: ',' %}

      {% for size_value in fallback_sizes %}
        <button
          type="button"
          class="me-size-picker__button{% if forloop.first %} is-active{% endif %}"
          data-me-size-button
          data-size-value="{{ size_value }}"
          data-me-fallback-size
          aria-pressed="{% if forloop.first %}true{% else %}false{% endif %}"
        >
          <span>{{ size_value }}</span>
        </button>
      {% endfor %}
    {% endif %}
  </div>

  <div
    class="me-size-picker__notice"
    data-me-size-notice
    {% if size_option_position > 0 or is_1007_youth_tee %}
      hidden
    {% endif %}
  >
    <span aria-hidden="true">✓</span>

    <div>
      <strong>No size selection needed</strong>

      <small>
        This product currently has one standard product configuration.
      </small>
    </div>
  </div>

  <p
    class="me-size-picker__message"
    data-me-size-message
    aria-live="polite"
  ></p>

  <input
    type="hidden"
    name="properties[Garment Size]"
    value="{% if is_1007_youth_tee %}XS{% endif %}"
    data-me-size-property
  >
</div>

<script
  type="application/json"
  data-me-initial-product-json
>
  {{ product | json }}
</script>




{% doc %}
  Renders reusable cart drawer markup for both initial page loads and Section Rendering API responses.

  @param {boolean} [render_wrapper] - When true, wraps the drawer in the section wrapper that the Section Rendering API adds automatically.
{% enddoc %}

{%- liquid
  assign render_wrapper = render_wrapper | default: true, allow_false: true
-%}

{%- if settings.cart_type == 'drawer' and template.name != 'cart' -%}
  {% if render_wrapper %}
    <div
      id="shopify-section-cart-drawer-section"
      class="shopify-section"
    >
  {% endif %}

  <script
    type="module"
    src="{{ 'cart-drawer.js' | asset_url }}"
    fetchpriority="low"
  ></script>

  {% capture empty_cart_drawer_content %}
    <div
      class="cart-drawer__content"
      aria-label="{{ 'accessibility.cart' | t }}"
    >
      <h2
        class="theme-drawer__title h4"
        id="cart-drawer-heading"
      >
        {{ 'content.your_cart_is_empty' | t }}
      </h2>

      <div class="cart-drawer__items">
        {% render 'cart-products', force_empty: true, context: 'drawer' %}
      </div>
    </div>
    {% endcapture %}

  <theme-drawer
    id="cart-drawer"
    data-skip-node-update
  >
    <dialog
      ref="panel"
      class="theme-drawer__dialog color-custom-drawer"
      aria-labelledby="cart-drawer-heading"
      cart-summary-sticky="true"
    >
      <cart-drawer-component
        {% if settings.auto_open_cart_drawer and template.name != 'cart' %}
          auto-open
        {% endif %}
      >
        <template id="empty-cart-template">
          {{ empty_cart_drawer_content }}
        </template>

        <div
          class="cart-drawer__inner{% if cart.empty? %} cart-drawer--empty{% endif %}"
          data-hydration-key="cart-drawer-inner"
        >
          {%- if cart.empty? -%}
            <div class="theme-drawer__header">
              <button
                on:click="#cart-drawer/close"
                class="theme-drawer__close-button cart-drawer__close-button--empty"
                type="button"
                aria-label="{{ 'actions.close' | t }}"
              >
                <span class="svg-wrapper">
                  {{- 'icon-close.svg' | inline_asset_content -}}
                </span>
              </button>
            </div>
          {%- else -%}
            {% capture cart_badge_html %}
              <span
                class="theme-drawer__badge{% if cart.item_count == 0 %} visually-hidden{% endif %}"
                aria-hidden="true"
                {% if cart.item_count <= 99 %}
                  data-maintain-ratio
                {% endif %}
              >
                {{- cart.item_count -}}
              </span>
              {% if cart.item_count > 0 %}
                <span class="visually-hidden">
                  {{ 'accessibility.cart_count' | t }}: {{ cart.item_count }}
                </span>
              {% endif %}
            {% endcapture %}
            {% assign cart_drawer_title = 'content.cart_title' | t %}
            {% render 'theme-drawer-header',
              title: cart_drawer_title,
              drawer_id: 'cart-drawer',
              heading_id: 'cart-drawer-heading',
              title_append: cart_badge_html
            %}
          {%- endif -%}

          {% capture cart_items_children %}
            {%- if cart.empty? -%}
              {{ empty_cart_drawer_content }}
            {%- else -%}
              <scroll-hint
                class="cart-drawer__content"
                aria-label="{{ 'accessibility.cart' | t }}"
                style="--header-height: 60px;"
              >
                <scroll-hint class="cart-drawer__items">
                  {% render 'cart-products', context: 'drawer' %}
                </scroll-hint>

                <div class="cart-drawer__summary">
                  {% render 'cart-summary', section_id: 'cart-drawer-section' %}
                </div>
              </scroll-hint>
            {%- endif -%}
          {% endcapture %}
          {% render 'cart-items-component',
            children: cart_items_children,
            is_drawer: true,
            section_id: 'cart-drawer-section'
          %}
        </div>
      </cart-drawer-component>
    </dialog>
  </theme-drawer>

  {% if render_wrapper %}
    </div>
  {% endif %}
{%- endif -%}

{% stylesheet %}
  cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
{% endstylesheet %}







{% # SRA target for /cart endpoints. The Section Rendering API provides the section wrapper. %}
{% render 'cart-drawer', render_wrapper: false %}

{% schema %}
{
  "name": "t:names.cart_drawer"
}
{% endschema %}



main-cart.liquid:


{% liquid
  assign custom_color = false
  if section.settings.background_color != blank or section.settings.text_color != blank
    assign custom_color = true
    render 'contrast-override', background_color: section.settings.background_color, text_color: section.settings.text_color, section_id: section.id
  endif
%}

{% capture cart_page_more_blocks_content %}
  <div class="cart-page__more-blocks">
    {%- content_for 'blocks' -%}
  </div>
{% endcapture %}

{% capture cart_items_children %}
  <template id="empty-cart-template">
    <div class="section-background{% if custom_color %} color-custom-{{ section.id }}{% endif %}"></div>
    <div
      class="section{% if custom_color %} color-custom-{{ section.id }}{% endif %} section--{{ section.settings.section_width }}"
    >
      <div
        class="cart-page spacing-style{% if cart.empty? %} cart-page--empty{% endif %}"
        style="{% render 'spacing-style', settings: section.settings %}"
      >
        <div class="cart-page__title">
          {%- content_for 'block', id: 'cart-page-title', type: '_cart-title', force_empty: true %}
        </div>
        <div class="cart-page__items">
          {%- content_for 'block', id: 'cart-page-items', type: '_cart-products', force_empty: true %}
        </div>
        {{ cart_page_more_blocks_content }}
      </div>
    </div>
  </template>

  <div class="section-background{% if custom_color %} color-custom-{{ section.id }}{% endif %}"></div>
  <div
    class="section{% if custom_color %} color-custom-{{ section.id }}{% endif %} section--{{ section.settings.section_width }}"
  >
    <div
      class="cart-page spacing-style{% if cart.empty? %} cart-page--empty{% endif %}"
      style="{% render 'spacing-style', settings: section.settings %}"
    >
      <div class="cart-page__title">
        {%- content_for 'block', id: 'cart-page-title', type: '_cart-title' %}
      </div>

      <div class="cart-page__items">
        {%- content_for 'block', id: 'cart-page-items', type: '_cart-products' %}
      </div>

      {%- unless cart.empty? -%}
        <div class="cart-page__summary">
          {%- content_for 'block', id: 'cart-page-summary', type: '_cart-summary' -%}
        </div>
      {%- endunless -%}

      {{ cart_page_more_blocks_content }}
    </div>
  </div>
{% endcapture %}
{% render 'cart-items-component', children: cart_items_children, section_id: section.id %}

{% stylesheet %}
  .cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "t:names.cart",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "blocks": [
    {
      "type": "@theme"
    },
    {
      "type": "@app"
    },
    {
      "type": "text"
    },
    {
      "type": "icon"
    },
    {
      "type": "image"
    },
    {
      "type": "button"
    },
    {
      "type": "video"
    },
    {
      "type": "group"
    },
    {
      "type": "spacer"
    }
  ],
  "settings": [
    {
      "type": "select",
      "id": "section_width",
      "label": "t:settings.width",
      "options": [
        {
          "value": "page-width",
          "label": "t:options.page"
        },
        {
          "value": "full-width",
          "label": "t:options.full"
        }
      ],
      "default": "page-width"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:settings.background_color",
      "placeholder": "t:settings.default"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "t:settings.text_color",
      "placeholder": "t:settings.default"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ]
}
{% endschema %}
 


Pasted text(1).txt
Document
snippets/cart-items-component.liquid:
{% doc %}
  Cart Items Component

  Renders the cart-items-component custom element wrapper.

  @param {string} children - The HTML content to render inside the component
  @param {boolean} [is_drawer] - If true, adds the data-drawer attribute
  @param {string} [section_id] - The ID of the section to render the component in

  @example
  {% capture cart_content %}
    ... cart items content ...
  {% endcapture %}
  {% render 'cart-items-component', children: cart_content, is_drawer: true, section_id: section.id %}
{% enddoc %}

<cart-items-component
  class="cart-items-component"
  {% if is_drawer %}
    data-drawer
    view-event-trigger="dialog"
  {% endif %}
  data-section-id="{{ section_id }}"
  {% # theme-check-disable UnknownFilter %}
  view-event-payload="{{ cart | standard_event_data: 'view' | escape  }}"
  {% # theme-check-enable UnknownFilter %}
>
  {{ children }}
</cart-items-component>

{% stylesheet %}
  .cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
{% endstylesheet %}
there is a duplicated price on left, should only have 1 on the right. 
i do not see save design option
Edit
i do see the save the design but its hidden, suggested to move that right of the title section, near the "x" , that way its visible at all times.

when i click save design, it took me to a new page, i was hoping it would be an overlay on top of the designer so people can sign up or sign in. 

also still seeing price on left side
Today 8:58 AM
still seeing price on left side, this is with a new browser that i never loaded the website on. 
Pasted text(2).txt
Document
Pasted code (2)(1).js
JavaScript
maybe minor change -- but the circle within png/transpartent/dpi to have some sort of icon? 
Today 12:48 PM

Let’s combine two related phases so the next update improves both the designer and the product-page experience.

Designer phase: artwork-validation polish

We’ll replace the empty circles with clear SVG-style status icons:

PNG detected: green check
Transparent background: green check
Background found: red warning
DPI acceptable: green ruler/check
Low DPI: red warning
Review required: warning icon
Excellent print quality: star/check icon

We’ll also improve spacing and contrast so the badges are easier to scan without making the artwork cards taller.

Website phase: personalization guidance

Outside the designer, the product page should clearly explain what happens before customers click Personalize This Item:

One front print included
Additional back, sleeve, name/number, and neck-label pricing
PNG artwork requirements
Artwork quality review
Digital-proof policy
Production turnaround expectations
Custom-product approval and return reminder

I recommend adding a polished How Personalization Works section beneath the main product area, plus an Artwork Guidelines accordion. This will reduce confusion inside the designer and make the product page feel more complete.

Next combined build

The full replacement set should cover:

assets/me-artwork.js
assets/me-product.css
snippets/me-personalization-studio.liquid
snippets/me-main-product.liquid

Depending on where your current product-page content is rendered, it may instead use:

sections/me-main-product.liquid

Please paste the complete current contents of:

assets/me-artwork.js
assets/me-product.css

And whichever file contains:

{% render 'me-product-designer', product: product %}

I’ll return complete replacement files that add the validation icons and the new premium personalization-guidance section together.

lets combine and build it

To build this safely as full replacements, I need the current contents of these files first:

assets/me-artwork.js
assets/me-product.css

And the complete file that contains:

{% render 'me-product-designer', product: product %}

Based on your theme, that is likely one of:

snippets/me-main-product.liquid
sections/me-main-product.liquid

Once you paste those three files, I’ll return the complete combined replacement set with:

proper check, warning, transparency, image, and DPI icons;
clearer validation badges and artwork-quality messages;
a premium “How Personalization Works” product-page section;
included-print and paid-add-on pricing;
artwork requirements;
digital-proof explanation;
production-review guidance;
custom-order approval disclaimer;
responsive desktop and mobile styling.

I do not want to overwrite your working upload, preview, variant, and designer logic without seeing the current files.

Today 4:00 PM
Pasted code.css
File
me-product.css  -- attached.
i do not see assets/me-artwork.js

sections/me-main-product.liquid:
{{ 'me-product.css' | asset_url | stylesheet_tag }}
{{ 'me-product-layout.css' | asset_url | stylesheet_tag }}
{{ 'me-product-designer.css' | asset_url | stylesheet_tag }}
{{ 'me-placement-artwork.css' | asset_url | stylesheet_tag }}

<script src="{{ 'me-catalog.js' | asset_url }}" defer></script>
<script src="{{ 'me-placement-rules.js' | asset_url }}" defer></script>
<script src="{{ 'me-product.js' | asset_url }}" defer></script>
<script src="{{ 'me-live-preview.js' | asset_url }}" defer></script>
<script src="{{ 'me-product-designer.js' | asset_url }}" defer></script>
<script src="{{ 'me-placement-artwork.js' | asset_url }}" defer></script>
<script src="{{ 'me-color-designer.js' | asset_url }}" defer></script>

{% assign selected_variant = product.selected_or_first_available_variant %}

{% assign display_image = selected_variant.featured_image
  | default: product.featured_image
  | default: product.images.first
%}

<section class="me-main-product">
  {% form 'product',
    product,
    class: 'me-main-product__form',
    enctype: 'multipart/form-data'
  %}
    <input
      type="hidden"
      name="id"
      value="{{ selected_variant.id }}"
      data-me-variant-id
    >

    <div class="me-main-product__inner">
      <div class="me-main-product__preview-column">
        <div class="me-main-product__preview-sticky">
          <div class="me-main-product__gallery">
            {% if display_image %}
              <div class="me-main-product__image-main">
                <img
                  src="{{ display_image | image_url: width: 1400 }}"
                  alt="{{ product.title | escape }}"
                  loading="eager"
                  width="{{ display_image.width }}"
                  height="{{ display_image.height }}"
                >
              </div>
            {% endif %}

            {% if product.images.size > 1 %}
              <div class="me-main-product__thumbs">
                {% for image in product.images %}
                  <button
                    type="button"
                    class="me-main-product__thumb"
                    data-me-product-thumb="{{ image | image_url: width: 1400 }}"
                    aria-label="View product image {{ forloop.index }}"
                  >
                    <img
                      src="{{ image | image_url: width: 180 }}"
                      alt="{{ product.title | escape }}"
                      loading="lazy"
                      width="180"
                      height="180"
                    >
                  </button>
                {% endfor %}
              </div>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="me-main-product__panel">
        <p class="me-main-product__eyebrow">
          {{ section.settings.eyebrow }}
        </p>

        <h1>{{ product.title }}</h1>

        <div
          class="me-main-product__price"
          data-me-product-price
        >
          {{ selected_variant.price | money }}
        </div>

        <div class="me-main-product__badges">
          {% if section.settings.badge_1 != blank %}
            <span>{{ section.settings.badge_1 }}</span>
          {% endif %}

          {% if section.settings.badge_2 != blank %}
            <span>{{ section.settings.badge_2 }}</span>
          {% endif %}

          {% if section.settings.badge_3 != blank %}
            <span>{{ section.settings.badge_3 }}</span>
          {% endif %}
        </div>

        {% if product.description != blank %}
          <div class="me-main-product__description">
            {{ product.description }}
          </div>
        {% endif %}

        <button
          type="button"
          class="me-main-product__personalize"
          data-me-designer-open
        >
          <span class="me-main-product__personalize-copy">
            <strong>PERSONALIZE YOUR ITEM</strong>

            <small>
              Choose colors, print areas, and upload artwork
            </small>
          </span>

          <span
            class="me-main-product__personalize-arrow"
            aria-hidden="true"
          >
            →
          </span>
        </button>

        <div class="me-main-product__how-it-works">
          <strong>How personalization works</strong>

          <ol>
            <li>Choose your garment color and size.</li>
            <li>Select one or more paid print locations.</li>
            <li>Upload artwork separately for every location.</li>
            <li>Review the preview and submit your order.</li>
          </ol>
        </div>
      </div>
    </div>

    {% render 'me-product-designer', product: product %}
  {% endform %}
</section>

{% schema %}
{
  "name": "ME Main Product",
  "settings": [
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "Made to order"
    },
    {
      "type": "text",
      "id": "badge_1",
      "label": "Badge 1",
      "default": "Personalized"
    },
    {
      "type": "text",
      "id": "badge_2",
      "label": "Badge 2",
      "default": "Digital Proof Available"
    },
    {
      "type": "text",
      "id": "badge_3",
      "label": "Badge 3",
      "default": "Ships Nationwide"
    }
  ],
  "presets": [
    {
      "name": "ME Main Product"
    }
  ]
}
{% endschema %}


snippets/me-main-product.liquid does not exist


I found the artwork logic: your section loads me-placement-artwork.js, so there is no missing me-artwork.js. I built the icon enhancement as a separate asset, which avoids disturbing the working upload and DPI logic.

Replace/create these three complete files:

me-product.css
me-validation-icons.js
Download full replacement me-main-product.liquid

Your existing stylesheet was preserved and extended rather than rewritten from scratch.

Installation

In Edit code:

Replace assets/me-product.css
Create assets/me-validation-icons.js
Replace sections/me-main-product.liquid

Then hard-refresh with Ctrl + Shift + R.

What changes

Inside the designer, the validation badges now receive real icons:

PNG: image icon
Transparent: transparency icon
Background found: warning icon
Good DPI: ruler icon
Low DPI: warning icon
Excellent quality: star icon
Review required: red warning icon

The product page also gains:

A more premium Personalize Your Item button
Correct wording that one front print is included
Four-step personalization explanation
Artwork guidelines
Proof and production guidance
Expandable FAQs beneath the product area 

Library
/
me-product.css
.me-product-configurator {
  background: #f8f3eb;
  border: 1px solid #e4d8c8;
  border-radius: 24px;
  padding: 32px;
  margin: 32px 0;
}

.me-product-configurator__inner {
  max-width: 720px;
}

.me-product-configurator__eyebrow {
  margin: 0 0 10px;
  color: #b08d57;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.me-product-configurator h2 {
  margin: 0 0 28px;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  line-height: 0.98;
}

.me-product-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid #e4d8c8;
}

.me-product-step__number {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.me-product-step h3 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.me-product-step p {
  margin: 10px 0 0;
  color: #5f574f;
  font-size: 15px;
  line-height: 1.65;
}

.me-product-field {
  margin-top: 20px;
}

.me-product-field label {
  display: block;
  margin-bottom: 8px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 700;
}

.me-product-field select,
.me-product-field textarea,
.me-product-field input[type="file"] {
  width: 100%;
  border: 1px solid #c9b89e;
  border-radius: 14px;
  background: #ffffff;
  color: #2f2a25;
  padding: 14px 16px;
  font-size: 15px;
}

.me-product-field textarea {
  min-height: 120px;
  resize: vertical;
}

.me-product-field small {
  display: block;
  margin-top: 8px;
  color: #7a7067;
  font-size: 12px;
}

.me-product-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  color: #5f574f;
  font-size: 14px;
  line-height: 1.5;
}

.me-product-checkbox input {
  margin-top: 4px;
}

@media screen and (max-width: 749px) {
  .me-product-configurator {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .me-product-step {
    grid-template-columns: 1fr;
  }
}
.me-product-trust {
  background: #ffffff;
  border: 1px solid #e4d8c8;
  border-radius: 24px;
  padding: 32px;
  margin: 32px 0;
}

.me-product-trust__inner {
  max-width: 760px;
}

.me-product-trust__eyebrow {
  margin: 0 0 10px;
  color: #b08d57;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.me-product-trust h2 {
  margin: 0 0 28px;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 1;
}

.me-product-trust__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.me-product-trust__item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: #f8f3eb;
}

.me-product-trust__icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.me-product-trust__item h3 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.me-product-trust__item p {
  margin: 8px 0 0;
  color: #5f574f;
  font-size: 14px;
  line-height: 1.55;
}

@media screen and (max-width: 749px) {
  .me-product-trust {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .me-product-trust__grid {
    grid-template-columns: 1fr;
  }
}
.me-product-faq{
    margin:40px 0;
}

.me-product-faq__eyebrow{
    color:#B08D57;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
    font-weight:700;
}

.me-product-faq h2{
    margin:12px 0 32px;
    font-family:Cormorant,Georgia,serif;
    font-size:48px;
    color:#2f2a25;
    font-weight:400;
}

.me-product-faq__accordion{
    border-top:1px solid #E5DED5;
}

.me-product-faq__item{
    border-bottom:1px solid #E5DED5;
    padding:0;
}

.me-product-faq__item summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 0;
    font-size:18px;
    font-weight:600;
    color:#2f2a25;
}

.me-product-faq__item summary::-webkit-details-marker{
    display:none;
}

.me-product-faq__item summary span{
    font-size:30px;
    color:#B08D57;
}

.me-product-faq__answer{
    padding:0 0 24px;
    color:#5f574f;
    line-height:1.8;
    font-size:15px;
}
.me-main-product {
  background: #ffffff;
  padding: 64px 24px;
}

.me-main-product__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}

.me-main-product__gallery {
  position: sticky;
  top: 110px;
}

.me-main-product__image-main {
  background: #f8f3eb;
  border: 1px solid #e4d8c8;
  border-radius: 28px;
  overflow: hidden;
}

.me-main-product__image-main img {
  display: block;
  width: 100%;
  height: auto;
}

.me-main-product__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.me-main-product__thumb {
  width: 76px;
  height: 76px;
  border: 1px solid #e4d8c8;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  padding: 0;
  cursor: pointer;
}

.me-main-product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-main-product__panel {
  background: #ffffff;
}

.me-main-product__eyebrow,
.me-main-product__section-label {
  margin: 0 0 12px;
  color: #b08d57;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.me-main-product h1 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.me-main-product__price {
  margin-top: 22px;
  color: #2f2a25;
  font-size: 24px;
  font-weight: 800;
}

.me-main-product__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.me-main-product__badges span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f8f3eb;
  color: #5f574f;
  font-size: 13px;
  font-weight: 700;
}

.me-main-product__description {
  margin-top: 28px;
  color: #5f574f;
  font-size: 16px;
  line-height: 1.75;
}

.me-main-product__configurator {
  margin-top: 32px;
  padding: 28px;
  border-radius: 24px;
  background: #f8f3eb;
  border: 1px solid #e4d8c8;
}

.me-main-product__button {
  width: 100%;
  min-height: 54px;
  margin-top: 24px;
  border: 0;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.me-main-product__button:hover {
  background: #b08d57;
}

.me-main-product__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media screen and (max-width: 899px) {
  .me-main-product__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .me-main-product__gallery {
    position: static;
  }
}

@media screen and (max-width: 749px) {
  .me-main-product {
    padding: 34px 18px;
  }

  .me-main-product__configurator {
    padding: 22px;
  }
}
.me-color-swatches {
  margin: 24px 0;
}

.me-color-swatches__label {
  display: block;
  margin-bottom: 12px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 700;
}

.me-color-swatches__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.me-color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  border: 1px solid #c9b89e;
  background: #ffffff;
  color: #2f2a25;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.me-color-swatch.is-active {
  border-color: #2f2a25;
  box-shadow: 0 0 0 2px #2f2a25;
}

.me-color-swatch__circle {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(47, 42, 37, 0.2);
  background: #ddd;
}

/* Common apparel color mappings */
.me-color-swatch__circle--white { background: #ffffff; }
.me-color-swatch__circle--black { background: #111111; }
.me-color-swatch__circle--navy { background: #1f2a44; }
.me-color-swatch__circle--red { background: #a4262c; }
.me-color-swatch__circle--royal { background: #2454a6; }
.me-color-swatch__circle--blue { background: #2454a6; }
.me-color-swatch__circle--gray,
.me-color-swatch__circle--grey,
.me-color-swatch__circle--heather-gray,
.me-color-swatch__circle--heather-grey { background: #9b9b9b; }
.me-color-swatch__circle--ash { background: #d8d6d1; }
.me-color-swatch__circle--sand { background: #d8c3a5; }
.me-color-swatch__circle--cream { background: #f4ead7; }
.me-color-swatch__circle--green { background: #2f5d50; }
.me-color-swatch__circle--maroon { background: #6b1f2a; }
.me-color-swatch__circle--pink { background: #e9a7b5; }
.me-color-swatch__circle--purple { background: #5b3f86; }
.me-visual-picker {
  margin: 24px 0;
}

.me-visual-picker__label {
  display: block;
  margin-bottom: 12px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 700;
}

.me-visual-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.me-visual-picker__item {
  width: 92px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #c9b89e;
  background: #ffffff;
  color: #2f2a25;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.me-visual-picker__item:hover {
  transform: translateY(-2px);
  border-color: #b08d57;
}

.me-visual-picker__item.is-active {
  border-color: #2f2a25;
  box-shadow: 0 0 0 2px #2f2a25;
}

.me-visual-picker__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f3eb;
}

.me-visual-picker__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.me-visual-picker__fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: #ddd;
}

.me-visual-picker__name {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.me-option-cards {
  margin: 26px 0;
}

.me-option-cards__label {
  display: block;
  margin-bottom: 12px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 700;
}

.me-af-color-products__scroller {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 12px;
  max-width: 100%;
  overflow: visible;
  padding: 4px 0 0;
}

.me-option-card {
  flex: 0 0 112px;
  border: 1px solid #c9b89e;
  border-radius: 18px;
  background: #ffffff;
  padding: 8px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.me-option-card:hover {
  transform: translateY(-2px);
  border-color: #b08d57;
}

.me-option-card.is-active,
.me-option-card[aria-current="true"] {
  border-color: #2f2a25;
  box-shadow: 0 0 0 2px #2f2a25;
}

.me-option-card__image {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f3eb;
}

.me-option-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.me-option-card__name {
  display: block;
  margin-top: 8px;
  color: #2f2a25;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.me-product-field--native-variant {
  display: none;
}
.me-af-color-products {
  margin: 26px 0;
}

.me-af-color-products__label {
  display: block;
  margin-bottom: 12px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 700;
}

.me-af-color-products__scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 14px;
  scroll-snap-type: x mandatory;
}

.me-af-color-card {
  position: relative;
  border: 1px solid #c9b89e;
  border-radius: 18px;
  background: #ffffff;
  padding: 8px;
  color: #2f2a25;
  text-decoration: none;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.me-af-color-card:hover {
  transform: translateY(-2px);
  border-color: #b08d57;
}

.me-af-color-card.is-active {
  border-color: #2f2a25;
  box-shadow: 0 0 0 2px #2f2a25;
}

.me-af-color-card__image {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f3eb;
}

.me-af-color-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.me-af-color-card__name {
  display: block;
  margin-top: 8px;
  color: #2f2a25;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.me-visual-picker,
.me-option-cards {
  display: none !important;
}
.me-af-color-products__scroller {
  max-width: 100%;
}

.me-af-color-card {
  flex: 0 0 96px;
}
.me-main-product__panel,
.me-main-product__inner {
  min-width: 0;
}

.me-af-color-products,
.me-af-color-products__scroller {
  max-width: 100%;
  overflow-x: auto;
}

.me-main-product__gallery {
  min-width: 0;
}
.me-af-color-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: #f8f3eb;
}
.me-af-color-card__status {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: #5f574f;
}

.me-af-color-card__status.is-stock {
  color: #2f6b45;
}

.me-af-color-card__status.is-low {
  color: #b08d57;
}

.me-af-color-card__status.is-backorder {
  color: #9b2c2c;
}
.me-af-color-card.is-active::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.me-af-color-products__label::after {
  content: "";
}

@media screen and (max-width: 749px) {
  .me-af-color-products__scroller {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Force AF color cards into grid */
.me-af-color-products__scroller {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
  padding: 4px 0 0 !important;
}

.me-af-color-card {
  flex: unset !important;
  width: auto !important;
  min-width: 0 !important;
  position: relative;
}

.me-af-color-card.is-active::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

@media screen and (max-width: 749px) {
  .me-af-color-products__scroller {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Version 3.5 — premium color grid */
.me-af-color-products__label {
  display: block;
  margin-bottom: 4px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 800;
}

.me-af-color-products__label::before {
  content: "Choose Color";
}

.me-af-color-products__label {
  font-size: 0;
}

.me-af-color-products__label::before {
  font-size: 13px;
}

.me-af-color-products__scroller {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  overflow: visible !important;
  padding: 8px 0 0 !important;
}

.me-af-color-card {
  min-height: 142px;
  padding: 10px;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(47, 42, 37, 0.04);
}

.me-af-color-card:hover {
  transform: translateY(-3px);
  border-color: #b08d57;
  box-shadow: 0 16px 38px rgba(47, 42, 37, 0.08);
}

.me-af-color-card.is-active {
  border-color: #b08d57 !important;
  box-shadow: 0 0 0 2px #b08d57, 0 16px 38px rgba(47, 42, 37, 0.08);
}

.me-af-color-card.is-active::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #b08d57;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.me-af-color-card__image {
  aspect-ratio: 1 / 1;
}

.me-af-color-card__name {
  margin-top: 9px;
  font-size: 12px;
}

.me-af-color-card__status.is-backorder {
  color: #5f574f;
}

.me-af-color-card__status.is-backorder::after {
  content: " Available";
}

@media screen and (max-width: 989px) {
  .me-af-color-products__scroller {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 749px) {
  .me-af-color-products__scroller {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.me-af-color-products__label span {
  display: block;
  margin-top: 4px;
  color: #5f574f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.me-personalization-studio {
  margin-top: 32px;
  padding: 30px;
  border-radius: 24px;
  background: #f8f3eb;
  border: 1px solid #e4d8c8;
}

.me-studio-step {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid #e4d8c8;
}

.me-studio-step:first-of-type {
  border-top: 0;
  padding-top: 10px;
}

.me-studio-step__number {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.me-studio-step h3 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.me-studio-step p {
  margin: 8px 0 0;
  color: #5f574f;
  font-size: 14px;
  line-height: 1.6;
}

.me-placement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.me-placement-grid label {
  cursor: pointer;
}

.me-placement-grid input {
  position: absolute;
  opacity: 0;
}

.me-placement-grid span {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid #c9b89e;
  background: #ffffff;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 800;
}

.me-placement-grid input:checked + span {
  background: #2f2a25;
  border-color: #2f2a25;
  color: #ffffff;
}

@media screen and (max-width: 749px) {
  .me-personalization-studio {
    padding: 22px;
  }

  .me-studio-step {
    grid-template-columns: 1fr;
  }

  .me-placement-grid {
    grid-template-columns: 1fr;
  }
}
/* Personalization Studio upload area */

.me-upload-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  margin-top: 18px;
  padding: 28px 20px;
  border: 2px dashed #c9b89e;
  border-radius: 18px;
  background: #ffffff;
  color: #2f2a25;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.me-upload-zone:hover,
.me-upload-zone.is-dragging {
  border-color: #b08d57;
  background: #fffaf2;
  transform: translateY(-2px);
}

.me-upload-zone.has-file {
  border-style: solid;
  border-color: #b08d57;
}

.me-upload-zone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

.me-upload-zone__heading {
  font-size: 16px;
  font-weight: 800;
}

.me-upload-zone__subheading {
  margin-top: 4px;
  color: #5f574f;
  font-size: 13px;
}

.me-upload-zone__requirements {
  margin-top: 14px;
  color: #7a7067;
  font-size: 11px;
  line-height: 1.5;
}

.me-upload-zone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.me-artwork-result {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #e4d8c8;
  border-radius: 16px;
  background: #ffffff;
}

.me-artwork-result[hidden] {
  display: none;
}

.me-artwork-result__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  padding: 8px;
  border-radius: 12px;
  background-image:
    linear-gradient(45deg, #ece7df 25%, transparent 25%),
    linear-gradient(-45deg, #ece7df 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ece7df 75%),
    linear-gradient(-45deg, transparent 75%, #ece7df 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  overflow: hidden;
}

.me-artwork-result__preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.me-artwork-result__details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.me-artwork-result__details strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-artwork-result__details span {
  color: #5f574f;
  font-size: 12px;
}

.me-artwork-result__remove {
  width: fit-content;
  margin-top: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9b2c2c;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.me-artwork-validation {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.me-artwork-validation[hidden] {
  display: none;
}

.me-artwork-validation__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  color: #5f574f;
  font-size: 12px;
  line-height: 1.45;
}

.me-artwork-validation__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.me-artwork-validation__item.is-success
.me-artwork-validation__icon {
  background: #2f6b45;
}

.me-artwork-validation__item.is-warning
.me-artwork-validation__icon {
  background: #b08d57;
}

.me-artwork-validation__item.is-error
.me-artwork-validation__icon {
  background: #9b2c2c;
}

.me-artwork-validation__summary {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.me-artwork-validation__summary.is-success {
  background: #edf7f0;
  color: #2f6b45;
}

.me-artwork-validation__summary.is-warning {
  background: #fff7e6;
  color: #8b672e;
}

.me-artwork-validation__summary.is-error {
  background: #fff0f0;
  color: #9b2c2c;
}

.me-artwork-help {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(176, 141, 87, 0.1);
  color: #5f574f;
  font-size: 12px;
  line-height: 1.5;
}

.me-artwork-help strong {
  color: #2f2a25;
}

/* Better placement cards */

.me-placement-option span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 66px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid #c9b89e;
  background: #ffffff;
  color: #2f2a25;
}

.me-placement-option span strong {
  font-size: 13px;
}

.me-placement-option span small {
  margin-top: 3px;
  color: #7a7067;
  font-size: 10px;
  line-height: 1.3;
}

.me-placement-option input:checked + span {
  background: #2f2a25;
  border-color: #2f2a25;
  color: #ffffff;
}

.me-placement-option input:checked + span small {
  color: rgba(255, 255, 255, 0.72);
}

@media screen and (max-width: 749px) {
  .me-artwork-result {
    grid-template-columns: 70px 1fr;
  }

  .me-artwork-result__preview {
    width: 70px;
    height: 70px;
  }
}
/* Print quality report */

.me-print-quality {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid #e4d8c8;
  border-radius: 18px;
  background: #ffffff;
}

.me-print-quality[hidden] {
  display: none;
}

.me-print-quality.is-success {
  border-color: rgba(47, 107, 69, 0.35);
}

.me-print-quality.is-warning {
  border-color: rgba(176, 141, 87, 0.55);
}

.me-print-quality.is-error {
  border-color: rgba(155, 44, 44, 0.4);
}

.me-print-quality__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e4d8c8;
}

.me-print-quality__stars {
  color: #b08d57;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1;
}

.me-print-quality__title {
  color: #2f2a25;
  font-size: 14px;
  font-weight: 800;
}

.me-print-quality__score {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 0;
}

.me-print-quality__score strong {
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}

.me-print-quality__score span {
  color: #5f574f;
  font-size: 13px;
  font-weight: 700;
}

.me-print-quality__section {
  padding-top: 14px;
  border-top: 1px solid #e4d8c8;
}

.me-print-quality__section > strong {
  display: block;
  margin-bottom: 11px;
  color: #2f2a25;
  font-size: 13px;
}

.me-print-quality__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.me-print-quality__recommendation {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 7px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 11px;
  background: #edf7f0;
  color: #2f6b45;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.me-print-quality__recommendation > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: #2f6b45;
  color: #ffffff;
  font-size: 10px;
}

.me-print-quality__recommendation small {
  display: block;
  margin-top: 2px;
  color: #5f7c66;
  font-size: 10px;
  font-weight: 600;
}

.me-print-quality__recommendation.is-empty {
  display: block;
  grid-column: 1 / -1;
  background: #fff0f0;
  color: #9b2c2c;
}

.me-print-quality__warnings {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.me-print-quality__warning {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 7px;
  align-items: start;
  padding: 10px 11px;
  border-radius: 11px;
  background: #fff7e6;
  color: #8b672e;
  font-size: 12px;
  line-height: 1.45;
}

.me-print-quality__warning > span:first-child {
  font-size: 15px;
}

.me-print-quality__warning strong {
  color: #75541f;
}

@media screen and (max-width: 749px) {
  .me-print-quality__list {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   ME Size Picker
===================================================== */

.me-size-picker {
  margin: 30px 0;
  padding: 24px;
  border: 1px solid #e4d8c8;
  border-radius: 20px;
  background: #f8f3eb;
}

.me-size-picker__heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 15px;
}

.me-size-picker__heading > span:first-child {
  color: #2f2a25;
  font-size: 14px;
  font-weight: 800;
}

.me-size-picker__heading > span:last-child {
  color: #5f574f;
  font-size: 12px;
  font-weight: 600;
}

.me-size-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.me-size-picker__button {
  position: relative;
  min-width: 58px;
  min-height: 46px;
  padding: 8px 13px;
  border: 1px solid #c9b89e;
  border-radius: 12px;
  background: #ffffff;
  color: #2f2a25;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.me-size-picker__button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #b08d57;
}

.me-size-picker__button.is-active {
  border-color: #2f2a25;
  background: #2f2a25;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(47, 42, 37, 0.14);
}

.me-size-picker__button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  text-decoration: line-through;
}

.me-size-picker__button small {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* =====================================================
   ME Quantity Picker
===================================================== */

.me-quantity-picker {
  margin-top: 26px;
}

.me-quantity-picker > label {
  display: block;
  margin-bottom: 9px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 800;
}

.me-quantity-picker__control {
  display: inline-grid;
  grid-template-columns: 46px 66px 46px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #c9b89e;
  border-radius: 999px;
  background: #ffffff;
}

.me-quantity-picker__button {
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f2a25;
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
}

.me-quantity-picker__button:hover {
  background: #f8f3eb;
  color: #b08d57;
}

.me-quantity-picker__control input {
  width: 100%;
  height: 46px;
  padding: 0;
  border: 0;
  border-right: 1px solid #e4d8c8;
  border-left: 1px solid #e4d8c8;
  border-radius: 0;
  background: #ffffff;
  color: #2f2a25;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  appearance: textfield;
}

.me-quantity-picker__control input::-webkit-inner-spin-button,
.me-quantity-picker__control input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

@media screen and (max-width: 749px) {
  .me-size-picker {
    padding: 20px 16px;
  }

  .me-size-picker__button {
    flex: 1 0 56px;
  }
}
/* =====================================================
   ME Live Artwork Preview
===================================================== */

.me-live-preview {
  margin: 30px 0;
  padding: 24px;
  border: 1px solid #e4d8c8;
  border-radius: 22px;
  background: #f8f3eb;
}

.me-live-preview__heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.me-live-preview__heading h3 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
}

.me-live-preview__heading > span {
  flex-shrink: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: #ffffff;
  color: #5f574f;
  font-size: 11px;
  font-weight: 800;
}

.me-live-preview__notice {
  margin: 12px 0 18px;
  color: #5f574f;
  font-size: 12px;
  line-height: 1.55;
}

.me-live-preview__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid #e4d8c8;
  border-radius: 18px;
  background: #ffffff;
}

.me-live-preview__product {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.me-live-preview__print-area {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition:
    top 0.25s ease,
    left 0.25s ease,
    width 0.25s ease,
    height 0.25s ease,
    transform 0.25s ease;
}

.me-live-preview__artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}

.me-live-preview__artwork[hidden] {
  display: none;
}

/* Approximate placement zones */

.me-live-preview__print-area.is-left-chest {
  top: 30%;
  left: 55%;
  width: 15%;
  height: 15%;
}

.me-live-preview__print-area.is-full-front {
  top: 28%;
  left: 50%;
  width: 36%;
  height: 42%;
  transform: translateX(-50%);
}

.me-live-preview__print-area.is-full-back {
  top: 27%;
  left: 50%;
  width: 38%;
  height: 45%;
  transform: translateX(-50%);
}

.me-live-preview__print-area.is-left-sleeve {
  top: 27%;
  left: 19%;
  width: 12%;
  height: 18%;
  transform: rotate(-8deg);
}

.me-live-preview__print-area.is-right-sleeve {
  top: 27%;
  right: 19%;
  left: auto;
  width: 12%;
  height: 18%;
  transform: rotate(8deg);
}

.me-live-preview__print-area.is-other {
  top: 35%;
  left: 50%;
  width: 30%;
  height: 30%;
  transform: translateX(-50%);
}

.me-live-preview__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #5f574f;
  text-align: center;
}

.me-live-preview__empty[hidden] {
  display: none;
}

.me-live-preview__empty > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(47, 42, 37, 0.9);
  color: #ffffff;
  font-size: 21px;
}

.me-live-preview__empty strong {
  font-size: 14px;
}

.me-live-preview__empty small {
  margin-top: 4px;
  font-size: 11px;
}

.me-live-preview__status {
  margin-top: 12px;
  color: #5f574f;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 749px) {
  .me-live-preview {
    padding: 18px;
  }

  .me-live-preview__heading {
    flex-direction: column;
  }
}
/* =====================================================
   ME Live Preview Controls v2.2
===================================================== */

.me-preview-view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 999px;
  background: #e9dfd1;
}

.me-preview-view-toggle__button {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5f574f;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.me-preview-view-toggle__button.is-active {
  background: #2f2a25;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(47, 42, 37, 0.16);
}

.me-live-preview__artwork-control {
  width: 100%;
  height: 100%;
  transform-origin: center;
  transition: transform 0.08s linear;
}

.me-preview-controls {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #e4d8c8;
  border-radius: 18px;
  background: #ffffff;
}

.me-preview-controls__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4d8c8;
}

.me-preview-controls__header h4 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.me-preview-controls__reset {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #c9b89e;
  border-radius: 999px;
  background: #ffffff;
  color: #5f574f;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.me-preview-controls__reset:hover {
  border-color: #b08d57;
  color: #b08d57;
}

.me-preview-control {
  padding: 17px 0;
  border-bottom: 1px solid #eee7dc;
}

.me-preview-control:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.me-preview-control__label {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.me-preview-control__label label {
  color: #2f2a25;
  font-size: 12px;
  font-weight: 800;
}

.me-preview-control__label output {
  color: #b08d57;
  font-size: 11px;
  font-weight: 800;
}

.me-preview-control input[type="range"] {
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #e4d8c8;
  cursor: pointer;
  appearance: none;
}

.me-preview-control input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: #2f2a25;
  box-shadow: 0 2px 7px rgba(47, 42, 37, 0.25);
  appearance: none;
}

.me-preview-control input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: #2f2a25;
  box-shadow: 0 2px 7px rgba(47, 42, 37, 0.25);
}

@media screen and (max-width: 749px) {
  .me-preview-controls {
    padding: 17px;
  }

  .me-preview-view-toggle {
    display: grid;
    width: 100%;
  }
}
/* =====================================================
   Automatic Artwork Optimization
===================================================== */

.me-artwork-optimization {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(47, 107, 69, 0.3);
  border-radius: 16px;
  background: #edf7f0;
}

.me-artwork-optimization[hidden] {
  display: none;
}

.me-artwork-optimization.is-standard {
  border-color: rgba(47, 107, 69, 0.3);
  background: #edf7f0;
}

.me-artwork-optimization.is-optimization {
  border-color: rgba(176, 141, 87, 0.5);
  background: #fff8e9;
}

.me-artwork-optimization.is-review {
  border-color: rgba(155, 44, 44, 0.35);
  background: #fff0f0;
}

.me-artwork-optimization__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #2f6b45;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.me-artwork-optimization.is-optimization
.me-artwork-optimization__icon {
  background: #b08d57;
}

.me-artwork-optimization.is-review
.me-artwork-optimization__icon {
  background: #9b2c2c;
}

.me-artwork-optimization__content strong {
  display: block;
  color: #2f2a25;
  font-size: 14px;
  line-height: 1.35;
}

.me-artwork-optimization__content p {
  margin: 5px 0 8px;
  color: #5f574f;
  font-size: 12px;
  line-height: 1.55;
}

.me-artwork-optimization__content small {
  display: block;
  color: #7a7067;
  font-size: 10px;
  line-height: 1.5;
}

@media screen and (max-width: 749px) {
  .me-artwork-optimization {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   ME Product Guidance + Validation Icons v4.0
===================================================== */
.me-main-product__personalize{display:flex;width:100%;min-height:68px;align-items:center;justify-content:space-between;gap:20px;margin-top:30px;padding:14px 18px 14px 22px;border:1px solid #2f2a25;border-radius:16px;background:linear-gradient(135deg,#2f2a25 0%,#1f1b18 100%);color:#fff;text-align:left;cursor:pointer;box-shadow:0 14px 34px rgba(47,42,37,.15);transition:.2s ease}
.me-main-product__personalize:hover{transform:translateY(-2px);border-color:#b08d57;background:linear-gradient(135deg,#b08d57 0%,#92703f 100%);box-shadow:0 18px 42px rgba(47,42,37,.2)}
.me-main-product__personalize-copy{display:grid;gap:4px}.me-main-product__personalize-copy strong{color:inherit;font-size:13px;letter-spacing:.08em}.me-main-product__personalize-copy small{color:rgba(255,255,255,.75);font-size:11px;line-height:1.4}
.me-main-product__personalize-arrow{display:flex;width:38px;height:38px;flex:0 0 auto;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.34);border-radius:999px;font-size:18px}
.me-main-product__how-it-works{margin-top:24px;padding:22px;border:1px solid #e4d8c8;border-radius:18px;background:#fbf8f3}.me-main-product__how-it-works>strong{display:block;color:#2f2a25;font-size:13px}.me-main-product__how-it-works ol{display:grid;gap:9px;margin:14px 0 0;padding-left:20px;color:#5f574f;font-size:13px;line-height:1.55}
.me-product-guidance{max-width:1280px;margin:72px auto 0;padding-top:62px;border-top:1px solid #e4d8c8}.me-product-guidance__intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:end}.me-product-guidance__eyebrow{margin:0 0 11px;color:#b08d57;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.me-product-guidance h2{margin:0;color:#2f2a25;font-family:Cormorant,Georgia,serif;font-size:clamp(42px,5vw,66px);font-weight:400;line-height:.98;letter-spacing:-.025em}.me-product-guidance__lead{max-width:700px;margin:0;color:#5f574f;font-size:16px;line-height:1.75}
.me-product-guidance__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}.me-product-guidance__step{min-height:220px;padding:24px;border:1px solid #e4d8c8;border-radius:22px;background:linear-gradient(145deg,#fffdfa 0%,#f8f3eb 100%);box-shadow:0 16px 40px rgba(47,42,37,.05)}
.me-product-guidance__step-number{display:flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:999px;background:#2f2a25;color:#fff;font-size:12px;font-weight:800}.me-product-guidance__step h3{margin:28px 0 10px;color:#2f2a25;font-family:Cormorant,Georgia,serif;font-size:29px;font-weight:500;line-height:1}.me-product-guidance__step p{margin:0;color:#5f574f;font-size:13px;line-height:1.6}
.me-product-guidance__details{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:22px;margin-top:22px}.me-product-guidance__card{padding:28px;border:1px solid #e4d8c8;border-radius:22px;background:#fff}.me-product-guidance__card--warm{background:#f8f3eb}.me-product-guidance__card h3{margin:0 0 18px;color:#2f2a25;font-family:Cormorant,Georgia,serif;font-size:34px;font-weight:500;line-height:1}
.me-product-guidance__list{display:grid;gap:13px;padding:0;margin:0;list-style:none}.me-product-guidance__list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;color:#5f574f;font-size:13px;line-height:1.55}.me-product-guidance__list-icon{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:999px;background:#edf7f0;color:#2f6b45;font-size:11px;font-weight:900}
.me-product-guidance__accordion{margin-top:22px;border-top:1px solid #e4d8c8}.me-product-guidance__accordion details{border-bottom:1px solid #e4d8c8}.me-product-guidance__accordion summary{display:flex;min-height:68px;align-items:center;justify-content:space-between;gap:20px;padding:0;color:#2f2a25;font-size:14px;font-weight:800;list-style:none;cursor:pointer}.me-product-guidance__accordion summary::-webkit-details-marker{display:none}.me-product-guidance__accordion summary:after{content:'+';color:#b08d57;font-size:26px;font-weight:400}.me-product-guidance__accordion details[open] summary:after{content:'−'}.me-product-guidance__accordion-content{padding:0 0 22px;color:#5f574f;font-size:13px;line-height:1.7}
.me-validation-chip{display:inline-flex!important;align-items:center!important;gap:7px!important}.me-validation-chip__icon{display:inline-flex;width:20px;height:20px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:999px;color:#fff}.me-validation-chip__icon svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.me-validation-chip.is-success .me-validation-chip__icon{background:#2f6b45}.me-validation-chip.is-warning .me-validation-chip__icon{background:#b08d57}.me-validation-chip.is-error .me-validation-chip__icon{background:#9b2c2c}.me-validation-chip.is-quality{font-weight:800}.me-validation-chip.is-quality .me-validation-chip__icon{width:22px;height:22px}
@media(max-width:989px){.me-product-guidance__steps{grid-template-columns:repeat(2,minmax(0,1fr))}.me-product-guidance__intro,.me-product-guidance__details{grid-template-columns:1fr}}
@media(max-width:749px){.me-main-product__personalize{min-height:62px;padding-inline:17px}.me-product-guidance{margin-top:52px;padding-top:44px}.me-product-guidance__steps{grid-template-columns:1fr}.me-product-guidance__step{min-height:auto}.me-product-guidance__card{padding:22px}}

Library
/
me-product.css
.me-product-configurator {
  background: #f8f3eb;
  border: 1px solid #e4d8c8;
  border-radius: 24px;
  padding: 32px;
  margin: 32px 0;
}

.me-product-configurator__inner {
  max-width: 720px;
}

.me-product-configurator__eyebrow {
  margin: 0 0 10px;
  color: #b08d57;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.me-product-configurator h2 {
  margin: 0 0 28px;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  line-height: 0.98;
}

.me-product-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid #e4d8c8;
}

.me-product-step__number {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.me-product-step h3 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.me-product-step p {
  margin: 10px 0 0;
  color: #5f574f;
  font-size: 15px;
  line-height: 1.65;
}

.me-product-field {
  margin-top: 20px;
}

.me-product-field label {
  display: block;
  margin-bottom: 8px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 700;
}

.me-product-field select,
.me-product-field textarea,
.me-product-field input[type="file"] {
  width: 100%;
  border: 1px solid #c9b89e;
  border-radius: 14px;
  background: #ffffff;
  color: #2f2a25;
  padding: 14px 16px;
  font-size: 15px;
}

.me-product-field textarea {
  min-height: 120px;
  resize: vertical;
}

.me-product-field small {
  display: block;
  margin-top: 8px;
  color: #7a7067;
  font-size: 12px;
}

.me-product-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  color: #5f574f;
  font-size: 14px;
  line-height: 1.5;
}

.me-product-checkbox input {
  margin-top: 4px;
}

@media screen and (max-width: 749px) {
  .me-product-configurator {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .me-product-step {
    grid-template-columns: 1fr;
  }
}
.me-product-trust {
  background: #ffffff;
  border: 1px solid #e4d8c8;
  border-radius: 24px;
  padding: 32px;
  margin: 32px 0;
}

.me-product-trust__inner {
  max-width: 760px;
}

.me-product-trust__eyebrow {
  margin: 0 0 10px;
  color: #b08d57;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.me-product-trust h2 {
  margin: 0 0 28px;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 1;
}

.me-product-trust__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.me-product-trust__item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: #f8f3eb;
}

.me-product-trust__icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.me-product-trust__item h3 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.me-product-trust__item p {
  margin: 8px 0 0;
  color: #5f574f;
  font-size: 14px;
  line-height: 1.55;
}

@media screen and (max-width: 749px) {
  .me-product-trust {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .me-product-trust__grid {
    grid-template-columns: 1fr;
  }
}
.me-product-faq{
    margin:40px 0;
}

.me-product-faq__eyebrow{
    color:#B08D57;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
    font-weight:700;
}

.me-product-faq h2{
    margin:12px 0 32px;
    font-family:Cormorant,Georgia,serif;
    font-size:48px;
    color:#2f2a25;
    font-weight:400;
}

.me-product-faq__accordion{
    border-top:1px solid #E5DED5;
}

.me-product-faq__item{
    border-bottom:1px solid #E5DED5;
    padding:0;
}

.me-product-faq__item summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 0;
    font-size:18px;
    font-weight:600;
    color:#2f2a25;
}

.me-product-faq__item summary::-webkit-details-marker{
    display:none;
}

.me-product-faq__item summary span{
    font-size:30px;
    color:#B08D57;
}

.me-product-faq__answer{
    padding:0 0 24px;
    color:#5f574f;
    line-height:1.8;
    font-size:15px;
}
.me-main-product {
  background: #ffffff;
  padding: 64px 24px;
}

.me-main-product__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}

.me-main-product__gallery {
  position: sticky;
  top: 110px;
}

.me-main-product__image-main {
  background: #f8f3eb;
  border: 1px solid #e4d8c8;
  border-radius: 28px;
  overflow: hidden;
}

.me-main-product__image-main img {
  display: block;
  width: 100%;
  height: auto;
}

.me-main-product__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.me-main-product__thumb {
  width: 76px;
  height: 76px;
  border: 1px solid #e4d8c8;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  padding: 0;
  cursor: pointer;
}

.me-main-product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-main-product__panel {
  background: #ffffff;
}

.me-main-product__eyebrow,
.me-main-product__section-label {
  margin: 0 0 12px;
  color: #b08d57;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.me-main-product h1 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.me-main-product__price {
  margin-top: 22px;
  color: #2f2a25;
  font-size: 24px;
  font-weight: 800;
}

.me-main-product__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.me-main-product__badges span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f8f3eb;
  color: #5f574f;
  font-size: 13px;
  font-weight: 700;
}

.me-main-product__description {
  margin-top: 28px;
  color: #5f574f;
  font-size: 16px;
  line-height: 1.75;
}

.me-main-product__configurator {
  margin-top: 32px;
  padding: 28px;
  border-radius: 24px;
  background: #f8f3eb;
  border: 1px solid #e4d8c8;
}

.me-main-product__button {
  width: 100%;
  min-height: 54px;
  margin-top: 24px;
  border: 0;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.me-main-product__button:hover {
  background: #b08d57;
}

.me-main-product__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media screen and (max-width: 899px) {
  .me-main-product__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .me-main-product__gallery {
    position: static;
  }
}

@media screen and (max-width: 749px) {
  .me-main-product {
    padding: 34px 18px;
  }

  .me-main-product__configurator {
    padding: 22px;
  }
}
.me-color-swatches {
  margin: 24px 0;
}

.me-color-swatches__label {
  display: block;
  margin-bottom: 12px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 700;
}

.me-color-swatches__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.me-color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  border: 1px solid #c9b89e;
  background: #ffffff;
  color: #2f2a25;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.me-color-swatch.is-active {
  border-color: #2f2a25;
  box-shadow: 0 0 0 2px #2f2a25;
}

.me-color-swatch__circle {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(47, 42, 37, 0.2);
  background: #ddd;
}

/* Common apparel color mappings */
.me-color-swatch__circle--white { background: #ffffff; }
.me-color-swatch__circle--black { background: #111111; }
.me-color-swatch__circle--navy { background: #1f2a44; }
.me-color-swatch__circle--red { background: #a4262c; }
.me-color-swatch__circle--royal { background: #2454a6; }
.me-color-swatch__circle--blue { background: #2454a6; }
.me-color-swatch__circle--gray,
.me-color-swatch__circle--grey,
.me-color-swatch__circle--heather-gray,
.me-color-swatch__circle--heather-grey { background: #9b9b9b; }
.me-color-swatch__circle--ash { background: #d8d6d1; }
.me-color-swatch__circle--sand { background: #d8c3a5; }
.me-color-swatch__circle--cream { background: #f4ead7; }
.me-color-swatch__circle--green { background: #2f5d50; }
.me-color-swatch__circle--maroon { background: #6b1f2a; }
.me-color-swatch__circle--pink { background: #e9a7b5; }
.me-color-swatch__circle--purple { background: #5b3f86; }
.me-visual-picker {
  margin: 24px 0;
}

.me-visual-picker__label {
  display: block;
  margin-bottom: 12px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 700;
}

.me-visual-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.me-visual-picker__item {
  width: 92px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #c9b89e;
  background: #ffffff;
  color: #2f2a25;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.me-visual-picker__item:hover {
  transform: translateY(-2px);
  border-color: #b08d57;
}

.me-visual-picker__item.is-active {
  border-color: #2f2a25;
  box-shadow: 0 0 0 2px #2f2a25;
}

.me-visual-picker__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f3eb;
}

.me-visual-picker__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.me-visual-picker__fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: #ddd;
}

.me-visual-picker__name {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.me-option-cards {
  margin: 26px 0;
}

.me-option-cards__label {
  display: block;
  margin-bottom: 12px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 700;
}

.me-af-color-products__scroller {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 12px;
  max-width: 100%;
  overflow: visible;
  padding: 4px 0 0;
}

.me-option-card {
  flex: 0 0 112px;
  border: 1px solid #c9b89e;
  border-radius: 18px;
  background: #ffffff;
  padding: 8px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.me-option-card:hover {
  transform: translateY(-2px);
  border-color: #b08d57;
}

.me-option-card.is-active,
.me-option-card[aria-current="true"] {
  border-color: #2f2a25;
  box-shadow: 0 0 0 2px #2f2a25;
}

.me-option-card__image {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f3eb;
}

.me-option-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.me-option-card__name {
  display: block;
  margin-top: 8px;
  color: #2f2a25;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.me-product-field--native-variant {
  display: none;
}
.me-af-color-products {
  margin: 26px 0;
}

.me-af-color-products__label {
  display: block;
  margin-bottom: 12px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 700;
}

.me-af-color-products__scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 14px;
  scroll-snap-type: x mandatory;
}

.me-af-color-card {
  position: relative;
  border: 1px solid #c9b89e;
  border-radius: 18px;
  background: #ffffff;
  padding: 8px;
  color: #2f2a25;
  text-decoration: none;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.me-af-color-card:hover {
  transform: translateY(-2px);
  border-color: #b08d57;
}

.me-af-color-card.is-active {
  border-color: #2f2a25;
  box-shadow: 0 0 0 2px #2f2a25;
}

.me-af-color-card__image {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f3eb;
}

.me-af-color-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.me-af-color-card__name {
  display: block;
  margin-top: 8px;
  color: #2f2a25;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.me-visual-picker,
.me-option-cards {
  display: none !important;
}
.me-af-color-products__scroller {
  max-width: 100%;
}

.me-af-color-card {
  flex: 0 0 96px;
}
.me-main-product__panel,
.me-main-product__inner {
  min-width: 0;
}

.me-af-color-products,
.me-af-color-products__scroller {
  max-width: 100%;
  overflow-x: auto;
}

.me-main-product__gallery {
  min-width: 0;
}
.me-af-color-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: #f8f3eb;
}
.me-af-color-card__status {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: #5f574f;
}

.me-af-color-card__status.is-stock {
  color: #2f6b45;
}

.me-af-color-card__status.is-low {
  color: #b08d57;
}

.me-af-color-card__status.is-backorder {
  color: #9b2c2c;
}
.me-af-color-card.is-active::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.me-af-color-products__label::after {
  content: "";
}

@media screen and (max-width: 749px) {
  .me-af-color-products__scroller {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Force AF color cards into grid */
.me-af-color-products__scroller {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
  padding: 4px 0 0 !important;
}

.me-af-color-card {
  flex: unset !important;
  width: auto !important;
  min-width: 0 !important;
  position: relative;
}

.me-af-color-card.is-active::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

@media screen and (max-width: 749px) {
  .me-af-color-products__scroller {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Version 3.5 — premium color grid */
.me-af-color-products__label {
  display: block;
  margin-bottom: 4px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 800;
}

.me-af-color-products__label::before {
  content: "Choose Color";
}

.me-af-color-products__label {
  font-size: 0;
}

.me-af-color-products__label::before {
  font-size: 13px;
}

.me-af-color-products__scroller {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  overflow: visible !important;
  padding: 8px 0 0 !important;
}

.me-af-color-card {
  min-height: 142px;
  padding: 10px;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(47, 42, 37, 0.04);
}

.me-af-color-card:hover {
  transform: translateY(-3px);
  border-color: #b08d57;
  box-shadow: 0 16px 38px rgba(47, 42, 37, 0.08);
}

.me-af-color-card.is-active {
  border-color: #b08d57 !important;
  box-shadow: 0 0 0 2px #b08d57, 0 16px 38px rgba(47, 42, 37, 0.08);
}

.me-af-color-card.is-active::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #b08d57;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.me-af-color-card__image {
  aspect-ratio: 1 / 1;
}

.me-af-color-card__name {
  margin-top: 9px;
  font-size: 12px;
}

.me-af-color-card__status.is-backorder {
  color: #5f574f;
}

.me-af-color-card__status.is-backorder::after {
  content: " Available";
}

@media screen and (max-width: 989px) {
  .me-af-color-products__scroller {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 749px) {
  .me-af-color-products__scroller {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.me-af-color-products__label span {
  display: block;
  margin-top: 4px;
  color: #5f574f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.me-personalization-studio {
  margin-top: 32px;
  padding: 30px;
  border-radius: 24px;
  background: #f8f3eb;
  border: 1px solid #e4d8c8;
}

.me-studio-step {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid #e4d8c8;
}

.me-studio-step:first-of-type {
  border-top: 0;
  padding-top: 10px;
}

.me-studio-step__number {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.me-studio-step h3 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.me-studio-step p {
  margin: 8px 0 0;
  color: #5f574f;
  font-size: 14px;
  line-height: 1.6;
}

.me-placement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.me-placement-grid label {
  cursor: pointer;
}

.me-placement-grid input {
  position: absolute;
  opacity: 0;
}

.me-placement-grid span {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid #c9b89e;
  background: #ffffff;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 800;
}

.me-placement-grid input:checked + span {
  background: #2f2a25;
  border-color: #2f2a25;
  color: #ffffff;
}

@media screen and (max-width: 749px) {
  .me-personalization-studio {
    padding: 22px;
  }

  .me-studio-step {
    grid-template-columns: 1fr;
  }

  .me-placement-grid {
    grid-template-columns: 1fr;
  }
}
/* Personalization Studio upload area */

.me-upload-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  margin-top: 18px;
  padding: 28px 20px;
  border: 2px dashed #c9b89e;
  border-radius: 18px;
  background: #ffffff;
  color: #2f2a25;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.me-upload-zone:hover,
.me-upload-zone.is-dragging {
  border-color: #b08d57;
  background: #fffaf2;
  transform: translateY(-2px);
}

.me-upload-zone.has-file {
  border-style: solid;
  border-color: #b08d57;
}

.me-upload-zone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #2f2a25;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

.me-upload-zone__heading {
  font-size: 16px;
  font-weight: 800;
}

.me-upload-zone__subheading {
  margin-top: 4px;
  color: #5f574f;
  font-size: 13px;
}

.me-upload-zone__requirements {
  margin-top: 14px;
  color: #7a7067;
  font-size: 11px;
  line-height: 1.5;
}

.me-upload-zone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.me-artwork-result {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #e4d8c8;
  border-radius: 16px;
  background: #ffffff;
}

.me-artwork-result[hidden] {
  display: none;
}

.me-artwork-result__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  padding: 8px;
  border-radius: 12px;
  background-image:
    linear-gradient(45deg, #ece7df 25%, transparent 25%),
    linear-gradient(-45deg, #ece7df 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ece7df 75%),
    linear-gradient(-45deg, transparent 75%, #ece7df 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  overflow: hidden;
}

.me-artwork-result__preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.me-artwork-result__details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.me-artwork-result__details strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-artwork-result__details span {
  color: #5f574f;
  font-size: 12px;
}

.me-artwork-result__remove {
  width: fit-content;
  margin-top: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9b2c2c;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.me-artwork-validation {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.me-artwork-validation[hidden] {
  display: none;
}

.me-artwork-validation__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  color: #5f574f;
  font-size: 12px;
  line-height: 1.45;
}

.me-artwork-validation__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.me-artwork-validation__item.is-success
.me-artwork-validation__icon {
  background: #2f6b45;
}

.me-artwork-validation__item.is-warning
.me-artwork-validation__icon {
  background: #b08d57;
}

.me-artwork-validation__item.is-error
.me-artwork-validation__icon {
  background: #9b2c2c;
}

.me-artwork-validation__summary {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.me-artwork-validation__summary.is-success {
  background: #edf7f0;
  color: #2f6b45;
}

.me-artwork-validation__summary.is-warning {
  background: #fff7e6;
  color: #8b672e;
}

.me-artwork-validation__summary.is-error {
  background: #fff0f0;
  color: #9b2c2c;
}

.me-artwork-help {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(176, 141, 87, 0.1);
  color: #5f574f;
  font-size: 12px;
  line-height: 1.5;
}

.me-artwork-help strong {
  color: #2f2a25;
}

/* Better placement cards */

.me-placement-option span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 66px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid #c9b89e;
  background: #ffffff;
  color: #2f2a25;
}

.me-placement-option span strong {
  font-size: 13px;
}

.me-placement-option span small {
  margin-top: 3px;
  color: #7a7067;
  font-size: 10px;
  line-height: 1.3;
}

.me-placement-option input:checked + span {
  background: #2f2a25;
  border-color: #2f2a25;
  color: #ffffff;
}

.me-placement-option input:checked + span small {
  color: rgba(255, 255, 255, 0.72);
}

@media screen and (max-width: 749px) {
  .me-artwork-result {
    grid-template-columns: 70px 1fr;
  }

  .me-artwork-result__preview {
    width: 70px;
    height: 70px;
  }
}
/* Print quality report */

.me-print-quality {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid #e4d8c8;
  border-radius: 18px;
  background: #ffffff;
}

.me-print-quality[hidden] {
  display: none;
}

.me-print-quality.is-success {
  border-color: rgba(47, 107, 69, 0.35);
}

.me-print-quality.is-warning {
  border-color: rgba(176, 141, 87, 0.55);
}

.me-print-quality.is-error {
  border-color: rgba(155, 44, 44, 0.4);
}

.me-print-quality__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e4d8c8;
}

.me-print-quality__stars {
  color: #b08d57;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1;
}

.me-print-quality__title {
  color: #2f2a25;
  font-size: 14px;
  font-weight: 800;
}

.me-print-quality__score {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 0;
}

.me-print-quality__score strong {
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}

.me-print-quality__score span {
  color: #5f574f;
  font-size: 13px;
  font-weight: 700;
}

.me-print-quality__section {
  padding-top: 14px;
  border-top: 1px solid #e4d8c8;
}

.me-print-quality__section > strong {
  display: block;
  margin-bottom: 11px;
  color: #2f2a25;
  font-size: 13px;
}

.me-print-quality__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.me-print-quality__recommendation {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 7px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 11px;
  background: #edf7f0;
  color: #2f6b45;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.me-print-quality__recommendation > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: #2f6b45;
  color: #ffffff;
  font-size: 10px;
}

.me-print-quality__recommendation small {
  display: block;
  margin-top: 2px;
  color: #5f7c66;
  font-size: 10px;
  font-weight: 600;
}

.me-print-quality__recommendation.is-empty {
  display: block;
  grid-column: 1 / -1;
  background: #fff0f0;
  color: #9b2c2c;
}

.me-print-quality__warnings {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.me-print-quality__warning {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 7px;
  align-items: start;
  padding: 10px 11px;
  border-radius: 11px;
  background: #fff7e6;
  color: #8b672e;
  font-size: 12px;
  line-height: 1.45;
}

.me-print-quality__warning > span:first-child {
  font-size: 15px;
}

.me-print-quality__warning strong {
  color: #75541f;
}

@media screen and (max-width: 749px) {
  .me-print-quality__list {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   ME Size Picker
===================================================== */

.me-size-picker {
  margin: 30px 0;
  padding: 24px;
  border: 1px solid #e4d8c8;
  border-radius: 20px;
  background: #f8f3eb;
}

.me-size-picker__heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 15px;
}

.me-size-picker__heading > span:first-child {
  color: #2f2a25;
  font-size: 14px;
  font-weight: 800;
}

.me-size-picker__heading > span:last-child {
  color: #5f574f;
  font-size: 12px;
  font-weight: 600;
}

.me-size-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.me-size-picker__button {
  position: relative;
  min-width: 58px;
  min-height: 46px;
  padding: 8px 13px;
  border: 1px solid #c9b89e;
  border-radius: 12px;
  background: #ffffff;
  color: #2f2a25;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.me-size-picker__button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #b08d57;
}

.me-size-picker__button.is-active {
  border-color: #2f2a25;
  background: #2f2a25;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(47, 42, 37, 0.14);
}

.me-size-picker__button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  text-decoration: line-through;
}

.me-size-picker__button small {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* =====================================================
   ME Quantity Picker
===================================================== */

.me-quantity-picker {
  margin-top: 26px;
}

.me-quantity-picker > label {
  display: block;
  margin-bottom: 9px;
  color: #2f2a25;
  font-size: 13px;
  font-weight: 800;
}

.me-quantity-picker__control {
  display: inline-grid;
  grid-template-columns: 46px 66px 46px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #c9b89e;
  border-radius: 999px;
  background: #ffffff;
}

.me-quantity-picker__button {
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f2a25;
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
}

.me-quantity-picker__button:hover {
  background: #f8f3eb;
  color: #b08d57;
}

.me-quantity-picker__control input {
  width: 100%;
  height: 46px;
  padding: 0;
  border: 0;
  border-right: 1px solid #e4d8c8;
  border-left: 1px solid #e4d8c8;
  border-radius: 0;
  background: #ffffff;
  color: #2f2a25;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  appearance: textfield;
}

.me-quantity-picker__control input::-webkit-inner-spin-button,
.me-quantity-picker__control input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

@media screen and (max-width: 749px) {
  .me-size-picker {
    padding: 20px 16px;
  }

  .me-size-picker__button {
    flex: 1 0 56px;
  }
}
/* =====================================================
   ME Live Artwork Preview
===================================================== */

.me-live-preview {
  margin: 30px 0;
  padding: 24px;
  border: 1px solid #e4d8c8;
  border-radius: 22px;
  background: #f8f3eb;
}

.me-live-preview__heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.me-live-preview__heading h3 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
}

.me-live-preview__heading > span {
  flex-shrink: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: #ffffff;
  color: #5f574f;
  font-size: 11px;
  font-weight: 800;
}

.me-live-preview__notice {
  margin: 12px 0 18px;
  color: #5f574f;
  font-size: 12px;
  line-height: 1.55;
}

.me-live-preview__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid #e4d8c8;
  border-radius: 18px;
  background: #ffffff;
}

.me-live-preview__product {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.me-live-preview__print-area {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition:
    top 0.25s ease,
    left 0.25s ease,
    width 0.25s ease,
    height 0.25s ease,
    transform 0.25s ease;
}

.me-live-preview__artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}

.me-live-preview__artwork[hidden] {
  display: none;
}

/* Approximate placement zones */

.me-live-preview__print-area.is-left-chest {
  top: 30%;
  left: 55%;
  width: 15%;
  height: 15%;
}

.me-live-preview__print-area.is-full-front {
  top: 28%;
  left: 50%;
  width: 36%;
  height: 42%;
  transform: translateX(-50%);
}

.me-live-preview__print-area.is-full-back {
  top: 27%;
  left: 50%;
  width: 38%;
  height: 45%;
  transform: translateX(-50%);
}

.me-live-preview__print-area.is-left-sleeve {
  top: 27%;
  left: 19%;
  width: 12%;
  height: 18%;
  transform: rotate(-8deg);
}

.me-live-preview__print-area.is-right-sleeve {
  top: 27%;
  right: 19%;
  left: auto;
  width: 12%;
  height: 18%;
  transform: rotate(8deg);
}

.me-live-preview__print-area.is-other {
  top: 35%;
  left: 50%;
  width: 30%;
  height: 30%;
  transform: translateX(-50%);
}

.me-live-preview__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #5f574f;
  text-align: center;
}

.me-live-preview__empty[hidden] {
  display: none;
}

.me-live-preview__empty > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(47, 42, 37, 0.9);
  color: #ffffff;
  font-size: 21px;
}

.me-live-preview__empty strong {
  font-size: 14px;
}

.me-live-preview__empty small {
  margin-top: 4px;
  font-size: 11px;
}

.me-live-preview__status {
  margin-top: 12px;
  color: #5f574f;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 749px) {
  .me-live-preview {
    padding: 18px;
  }

  .me-live-preview__heading {
    flex-direction: column;
  }
}
/* =====================================================
   ME Live Preview Controls v2.2
===================================================== */

.me-preview-view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 999px;
  background: #e9dfd1;
}

.me-preview-view-toggle__button {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5f574f;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.me-preview-view-toggle__button.is-active {
  background: #2f2a25;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(47, 42, 37, 0.16);
}

.me-live-preview__artwork-control {
  width: 100%;
  height: 100%;
  transform-origin: center;
  transition: transform 0.08s linear;
}

.me-preview-controls {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #e4d8c8;
  border-radius: 18px;
  background: #ffffff;
}

.me-preview-controls__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4d8c8;
}

.me-preview-controls__header h4 {
  margin: 0;
  color: #2f2a25;
  font-family: Cormorant, Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.me-preview-controls__reset {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #c9b89e;
  border-radius: 999px;
  background: #ffffff;
  color: #5f574f;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.me-preview-controls__reset:hover {
  border-color: #b08d57;
  color: #b08d57;
}

.me-preview-control {
  padding: 17px 0;
  border-bottom: 1px solid #eee7dc;
}

.me-preview-control:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.me-preview-control__label {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.me-preview-control__label label {
  color: #2f2a25;
  font-size: 12px;
  font-weight: 800;
}

.me-preview-control__label output {
  color: #b08d57;
  font-size: 11px;
  font-weight: 800;
}

.me-preview-control input[type="range"] {
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #e4d8c8;
  cursor: pointer;
  appearance: none;
}

.me-preview-control input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: #2f2a25;
  box-shadow: 0 2px 7px rgba(47, 42, 37, 0.25);
  appearance: none;
}

.me-preview-control input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: #2f2a25;
  box-shadow: 0 2px 7px rgba(47, 42, 37, 0.25);
}

@media screen and (max-width: 749px) {
  .me-preview-controls {
    padding: 17px;
  }

  .me-preview-view-toggle {
    display: grid;
    width: 100%;
  }
}
/* =====================================================
   Automatic Artwork Optimization
===================================================== */

.me-artwork-optimization {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(47, 107, 69, 0.3);
  border-radius: 16px;
  background: #edf7f0;
}

.me-artwork-optimization[hidden] {
  display: none;
}

.me-artwork-optimization.is-standard {
  border-color: rgba(47, 107, 69, 0.3);
  background: #edf7f0;
}

.me-artwork-optimization.is-optimization {
  border-color: rgba(176, 141, 87, 0.5);
  background: #fff8e9;
}

.me-artwork-optimization.is-review {
  border-color: rgba(155, 44, 44, 0.35);
  background: #fff0f0;
}

.me-artwork-optimization__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #2f6b45;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.me-artwork-optimization.is-optimization
.me-artwork-optimization__icon {
  background: #b08d57;
}

.me-artwork-optimization.is-review
.me-artwork-optimization__icon {
  background: #9b2c2c;
}

.me-artwork-optimization__content strong {
  display: block;
  color: #2f2a25;
  font-size: 14px;
  line-height: 1.35;
}

.me-artwork-optimization__content p {
  margin: 5px 0 8px;
  color: #5f574f;
  font-size: 12px;
  line-height: 1.55;
}

.me-artwork-optimization__content small {
  display: block;
  color: #7a7067;
  font-size: 10px;
  line-height: 1.5;
}

@media screen and (max-width: 749px) {
  .me-artwork-optimization {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   ME Product Guidance + Validation Icons v4.0
===================================================== */
.me-main-product__personalize{display:flex;width:100%;min-height:68px;align-items:center;justify-content:space-between;gap:20px;margin-top:30px;padding:14px 18px 14px 22px;border:1px solid #2f2a25;border-radius:16px;background:linear-gradient(135deg,#2f2a25 0%,#1f1b18 100%);color:#fff;text-align:left;cursor:pointer;box-shadow:0 14px 34px rgba(47,42,37,.15);transition:.2s ease}
.me-main-product__personalize:hover{transform:translateY(-2px);border-color:#b08d57;background:linear-gradient(135deg,#b08d57 0%,#92703f 100%);box-shadow:0 18px 42px rgba(47,42,37,.2)}
.me-main-product__personalize-copy{display:grid;gap:4px}.me-main-product__personalize-copy strong{color:inherit;font-size:13px;letter-spacing:.08em}.me-main-product__personalize-copy small{color:rgba(255,255,255,.75);font-size:11px;line-height:1.4}
.me-main-product__personalize-arrow{display:flex;width:38px;height:38px;flex:0 0 auto;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.34);border-radius:999px;font-size:18px}
.me-main-product__how-it-works{margin-top:24px;padding:22px;border:1px solid #e4d8c8;border-radius:18px;background:#fbf8f3}.me-main-product__how-it-works>strong{display:block;color:#2f2a25;font-size:13px}.me-main-product__how-it-works ol{display:grid;gap:9px;margin:14px 0 0;padding-left:20px;color:#5f574f;font-size:13px;line-height:1.55}
.me-product-guidance{max-width:1280px;margin:72px auto 0;padding-top:62px;border-top:1px solid #e4d8c8}.me-product-guidance__intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:end}.me-product-guidance__eyebrow{margin:0 0 11px;color:#b08d57;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.me-product-guidance h2{margin:0;color:#2f2a25;font-family:Cormorant,Georgia,serif;font-size:clamp(42px,5vw,66px);font-weight:400;line-height:.98;letter-spacing:-.025em}.me-product-guidance__lead{max-width:700px;margin:0;color:#5f574f;font-size:16px;line-height:1.75}
.me-product-guidance__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}.me-product-guidance__step{min-height:220px;padding:24px;border:1px solid #e4d8c8;border-radius:22px;background:linear-gradient(145deg,#fffdfa 0%,#f8f3eb 100%);box-shadow:0 16px 40px rgba(47,42,37,.05)}
.me-product-guidance__step-number{display:flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:999px;background:#2f2a25;color:#fff;font-size:12px;font-weight:800}.me-product-guidance__step h3{margin:28px 0 10px;color:#2f2a25;font-family:Cormorant,Georgia,serif;font-size:29px;font-weight:500;line-height:1}.me-product-guidance__step p{margin:0;color:#5f574f;font-size:13px;line-height:1.6}
.me-product-guidance__details{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:22px;margin-top:22px}.me-product-guidance__card{padding:28px;border:1px solid #e4d8c8;border-radius:22px;background:#fff}.me-product-guidance__card--warm{background:#f8f3eb}.me-product-guidance__card h3{margin:0 0 18px;color:#2f2a25;font-family:Cormorant,Georgia,serif;font-size:34px;font-weight:500;line-height:1}
.me-product-guidance__list{display:grid;gap:13px;padding:0;margin:0;list-style:none}.me-product-guidance__list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;color:#5f574f;font-size:13px;line-height:1.55}.me-product-guidance__list-icon{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:999px;background:#edf7f0;color:#2f6b45;font-size:11px;font-weight:900}
.me-product-guidance__accordion{margin-top:22px;border-top:1px solid #e4d8c8}.me-product-guidance__accordion details{border-bottom:1px solid #e4d8c8}.me-product-guidance__accordion summary{display:flex;min-height:68px;align-items:center;justify-content:space-between;gap:20px;padding:0;color:#2f2a25;font-size:14px;font-weight:800;list-style:none;cursor:pointer}.me-product-guidance__accordion summary::-webkit-details-marker{display:none}.me-product-guidance__accordion summary:after{content:'+';color:#b08d57;font-size:26px;font-weight:400}.me-product-guidance__accordion details[open] summary:after{content:'−'}.me-product-guidance__accordion-content{padding:0 0 22px;color:#5f574f;font-size:13px;line-height:1.7}
.me-validation-chip{display:inline-flex!important;align-items:center!important;gap:7px!important}.me-validation-chip__icon{display:inline-flex;width:20px;height:20px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:999px;color:#fff}.me-validation-chip__icon svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.me-validation-chip.is-success .me-validation-chip__icon{background:#2f6b45}.me-validation-chip.is-warning .me-validation-chip__icon{background:#b08d57}.me-validation-chip.is-error .me-validation-chip__icon{background:#9b2c2c}.me-validation-chip.is-quality{font-weight:800}.me-validation-chip.is-quality .me-validation-chip__icon{width:22px;height:22px}
@media(max-width:989px){.me-product-guidance__steps{grid-template-columns:repeat(2,minmax(0,1fr))}.me-product-guidance__intro,.me-product-guidance__details{grid-template-columns:1fr}}
@media(max-width:749px){.me-main-product__personalize{min-height:62px;padding-inline:17px}.me-product-guidance{margin-top:52px;padding-top:44px}.me-product-guidance__steps{grid-template-columns:1fr}.me-product-guidance__step{min-height:auto}.me-product-guidance__card{padding:22px}}

/* =====================================================
   Designer v2.3.1 production-controlled preview
===================================================== */

/* Remove the divider that incorrectly extends from the thumbnail gallery. */
.me-product-guidance {
  border-top: 0 !important;
  padding-top: 36px !important;
}

/* Ensure the thumbnail area never draws a trailing divider. */
.me-main-product__thumbs,
.me-main-product__gallery,
.me-main-product__preview-column {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.me-main-product__thumbs::before,
.me-main-product__thumbs::after,
.me-main-product__gallery::before,
.me-main-product__gallery::after {
  content: none !important;
  display: none !important;
}