{# ── Sticky Add to Cart Bar ────────────────────────────────────────────────
   Colors are only written as data-* attributes when the merchant explicitly
   set one in the plugin config — see ProductStickyCartSubscriber. The JS
   plugin turns each present attribute into a scoped CSS custom property; an
   absent attribute means "inherit the theme", not "fall back to a hardcoded
   color" (see _sticky-cart-bar.scss). #}
{% set stickyCart = page.extensions.sellopsStickyCart ?? null %}
{% if stickyCart and stickyCart.enabled %}
{% set product = page.product %}

<div class="ssc-sticky-cart"
     data-ssc-sticky-cart="true"
     {% if stickyCart.textColor %}data-text-color="{{ stickyCart.textColor }}"{% endif %}
     {% if stickyCart.buttonColor1 %}data-button-color1="{{ stickyCart.buttonColor1 }}"{% endif %}
     {% if stickyCart.buttonColor2 %}data-button-color2="{{ stickyCart.buttonColor2 }}"{% endif %}
     {% if stickyCart.buttonTextColor %}data-button-text-color="{{ stickyCart.buttonTextColor }}"{% endif %}
     {% if stickyCart.selectionTextColor %}data-selection-text-color="{{ stickyCart.selectionTextColor }}"{% endif %}
     {% if stickyCart.selectionBackgroundColor %}data-selection-background-color="{{ stickyCart.selectionBackgroundColor }}"{% endif %}
     {% if stickyCart.selectionAccentColor %}data-selection-accent-color="{{ stickyCart.selectionAccentColor }}"{% endif %}
     hidden>

    <div class="ssc-sticky-cart__inner">

        <div class="ssc-sticky-cart__media">
            {% set cover = product.cover.media ?? null %}
            {% if cover %}
                <img class="ssc-sticky-cart__image"
                     src="{{ cover.url }}"
                     alt="{{ product.translated.name ?: 'sellops-sticky-cart.bar.productImageAlt'|trans }}"
                     width="64" height="64" loading="lazy">
            {% endif %}
        </div>

        <div class="ssc-sticky-cart__info">
            <span class="ssc-sticky-cart__title">{{ product.translated.name }}</span>
            <span class="ssc-sticky-cart__price">{{ product.calculatedPrice.totalPrice|currency }}</span>
        </div>

        <div class="ssc-sticky-cart__actions" data-ssc-sticky-actions></div>
    </div>

    {# Self-contained bag icon, cloned by the JS plugin and prepended to the
       cloned Add to Cart button — avoids depending on the active theme
       shipping any particular icon font/sprite. #}
    <template data-ssc-sticky-cart-icon-source>
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M6 6h15l-1.5 9h-12z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
            <path d="M6 6 5 3H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="9" cy="20" r="1.5" fill="currentColor"/>
            <circle cx="18" cy="20" r="1.5" fill="currentColor"/>
        </svg>
    </template>
</div>
{% endif %}