.block-product-card {
  position: relative;
}

.block-product-card.product-card-style--card {
  background-color: rgb(var(--color-background));
}

.block-product-card.product-card-style--card .block-product-price,
.block-product-card.product-card-style--card .block-product-title {
  padding-inline: 8px;
}
{
            {
            /if
        }
    }

        {
            {
            /if
        }
    }

        {
            {
            /for
        }
    }

        {
            {
             !--============================================================SCHEMA This defines what the merchant sees in the sidebar of the theme editor when they click on this section.============================================================--
        }
    }

        {
            {
            #schema
        }
    }

        {

        "name": "Symptom Wheel",
        "settings": [ {
            "type": "text", "id": "center_text", "label": "Center heading", "default": "Are your eyes trying to tell you something?"
        }

        ],
        "blocks": [ {

            "type": "symptom",
            "name": "Symptom item",
            "limit": 5,
            "settings": [ {
                "type": "image_picker", "id": "icon", "label": "Icon (circle image)"
            }

            ,
                {
                "type": "image_picker", "id": "lifestyle_image", "label": "Lifestyle photo (appears on hover)"
            }

            ,
                {
                "type": "text", "id": "title", "label": "Title", "default": "Dryness"
            }

            ,
                {
                "type": "textarea", "id": "description", "label": "Short description", "default": "Constant blinking or feeling sleepy."
            }

            ]
        }

        ],
        "presets": [ {

            "name": "Symptom Wheel",
            "blocks": [ {
                "type": "symptom"
            }

            ,
                {
                "type": "symptom"
            }

            ,
                {
                "type": "symptom"
            }

            ,
                {
                "type": "symptom"
            }

            ,
                {
                "type": "symptom"
            }

            ]
        }

        ]
    }

        {
            {
            /schema
        }
    }

    lor: #1a1a1a;
    margin: 0;
}

/* -- EACH SYMPTOM ITEM -------------------------------------- */
/* JS positions these absolutely around the ring. CSS handles the entrance animation. */
.sw-item {
    position: absolute;
    transform: translate(-50%, -50%);
    /* JS sets top/left; this centers the item on that point */
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    animation: fadeUp 0.6s ease forwards;
}

/* Stagger each item so they appear one after another */
.sw-item:nth-child(3) {
    animation-delay: 0.3s;
}

/* nth-child(3) = 1st block (ring + center are children 1 & 2) */
.sw-item:nth-child(4) {
    animation-delay: 0.45s;
}

.sw-item:nth-child(5) {
    animation-delay: 0.6s;
}

.sw-item:nth-child(6) {
    animation-delay: 0.75s;
}

.sw-item:nth-child(7) {
    animation-delay: 0.9s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 14px));
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* -- ICON DOT ----------------------------------------------- */
.sw-item__dot {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 1.5px solid #c8c8c8;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.sw-item:hover .sw-item__dot {
    transform: scale(1.18);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.13);
    border-color: #888;
}

.sw-item__icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
    /* Subtle icon pulse animation on hover */
    transition: transform 0.3s ease;
}

.sw-item:hover .sw-item__icon {
    transform: scale(1.08);
}

/* -- TEXT LABEL --------------------------------------------- */
.sw-item__label {
    margin-top: 10px;
    text-align: center;
    max-width: 130px;
}

.sw-item__title {
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    font-weight: 600;
    margin: 0 0 4px;
    color: #1a1a1a;
    white-space: nowrap;
}

.sw-item__desc {
    font-size: clamp(0.65rem, 1vw, 0.75rem);
    color: #666666;
    line-height: 1.45;
    margin: 0;
}

/* -- LIFESTYLE PHOTO OVERLAY -------------------------------- */
/* Hidden by default. Fades in when the parent item is hovered. */
.sw-item__lifestyle {
    position: fixed;
    /* Fixed so it's always centered on screen */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.94);
    width: clamp(240px, 30vw, 380px);
    height: clamp(240px, 30vw, 380px);
    border-radius: 18px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    /* Doesn't block click/hover on other elements */
    z-index: 9999;
    transition: opacity 0.35s ease, transform 0.35s ease;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
}

.sw-item:hover .sw-item__lifestyle {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.sw-item__lifestyle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -- MOBILE LAYOUT ------------------------------------------ */
/* On small screens, switch to a vertical stacked list */
@media (max-width: 640px) {
    .sw-wrapper {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0 16px;
    }

    .sw-ring,
    .sw-center {
        display: none;
        /* Hide the circle on mobile */
    }

    .sw-item {
        position: static;
        /* Override the absolute positioning */
        transform: none;
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        opacity: 1;
        animation: none;
    }

    .sw-item__label {
        text-align: left;
        margin-top: 0;
    }

    .sw-item__lifestyle {
        position: fixed;
        /* Keep centered on screen even on mobile */
    }
}

    {
        {
         !--============================================================SCHEMA This defines what the merchant sees in the sidebar of the theme editor when they click on this section.============================================================--
    }
}

    {
        {
        #schema
    }
}

    {

    "name": "Symptom Wheel",
    "settings": [ {
        "type": "text", "id": "center_text", "label": "Center heading", "default": "Are your eyes trying to tell you something?"
    }

    ],
    "blocks": [ {

        "type": "symptom",
        "name": "Symptom item",
        "limit": 5,
        "settings": [ {
            "type": "image_picker", "id": "icon", "label": "Icon (circle image)"
        }

        ,
            {
            "type": "image_picker", "id": "lifestyle_image", "label": "Lifestyle photo (appears on hover)"
        }

        ,
            {
            "type": "text", "id": "title", "label": "Title", "default": "Dryness"
        }

        ,
            {
            "type": "textarea", "id": "description", "label": "Short description", "default": "Constant blinking or feeling sleepy."
        }

        ]
    }

    ],
    "presets": [ {

        "name": "Symptom Wheel",
        "blocks": [ {
            "type": "symptom"
        }

        ,
            {
            "type": "symptom"
        }

        ,
            {
            "type": "symptom"
        }

        ,
            {
            "type": "symptom"
        }

        ,
            {
            "type": "symptom"
        }

        ]
    }

    ]
}