/* Features (Product Attributes) Widget styles */

.woolements-attributes-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woolements-attribute-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.woolements-attribute-label {
    font-weight: 600;
    margin-right: 8px;
}

.woolements-attribute-value {
    color: #333;
}

/* Stacked mode: label above, value below */
.woolements-attributes[data-attributes-display-mode="stacked"] .woolements-attribute-item {
    flex-direction: column;
    align-items: flex-start;
}
.woolements-attributes[data-attributes-display-mode="stacked"] .woolements-attribute-label {
    margin-right: 0;
    margin-bottom: 6px;
}

/* List mode: values rendered as nested ul */
.woolements-attribute-value-list {
    list-style: none; /* we will use custom bullets */
    margin: 0;
    padding-left: 0;
}

/* Custom bullet implementation using CSS variables set by Elementor selectors */
.woolements-attribute-value-list li {
    position: relative;
    position: relative;
    display: block;
    box-sizing: border-box;
    padding-left: calc(var(--attributes-list-marker-size, 8px) + var(--attributes-list-marker-gap, 10px));
    margin-bottom: var(--attributes-list-item-gap, 6px) !important;
}
.woolements-attribute-value-list li::before {
    content: '';
    position: absolute;
    left: 0 !important;
    top: 50%;
    transform: translateY(-50%);
    width: var(--attributes-list-marker-size, 8px);
    height: var(--attributes-list-marker-size, 8px);
    background: var(--attributes-list-marker-color, #333);
    border-radius: var(--attributes-list-marker-radius, 50%);
    display: var(--attributes-list-marker-display, block);
    z-index: 2;
}

.woolements-attributes[data-attributes-display-mode="list"] .woolements-attribute-item {
    align-items: flex-start;
}

/* Band styles */
.woolements-attribute-band {
    margin-bottom: 14px;
}
.woolements-attribute-band-title {
    font-weight: 700;
    margin-bottom: 8px;
}
.woolements-attribute-band-list {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
}

/* Support right-positioned custom bullets */
.woolements-attributes[data-attributes-display-mode="list"][data-attributes-list-marker-position="right"] .woolements-attribute-value-list li {
    padding-left: 0 !important;
    padding-right: calc(var(--attributes-list-marker-size, 8px) + var(--attributes-list-marker-gap, 10px)) !important;
}
.woolements-attributes[data-attributes-display-mode="list"][data-attributes-list-marker-position="right"] .woolements-attribute-value-list li::before {
    left: auto !important;
    right: 0 !important;
}

/* Also ensure default left positioning is enforced where list mode is active */
.woolements-attributes[data-attributes-display-mode="list"] .woolements-attribute-value-list li::before {
    left: 0 !important;
    right: auto !important;
}

/* Inline mode (default) - ensure label and value are on one line */
.woolements-attributes[data-attributes-display-mode="inline"] .woolements-attribute-item {
    flex-direction: row;
}

/* Small responsive tweak: stack on very small screens */
@media (max-width: 480px) {
    .woolements-attributes[data-attributes-display-mode="inline"] .woolements-attribute-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .woolements-attributes[data-attributes-display-mode="inline"] .woolements-attribute-label {
        margin-bottom: 6px;
    }
}