/* Design Soul — Sales Counter (front office badge)
   Layout only — colors/border/font/padding are set inline per the
   module's settings, so they take effect without editing this file. */
.ds-sales-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0;
    float: right;
    font-weight: 600;
    line-height: 1.4;
    position: relative;
    top: var(--ds-sc-top, 0px);
    left: var(--ds-sc-left, 0px);
}

/* Under ~768px width (phones/small tablets), use the separate mobile
   offset values instead of the desktop ones (set in Modules > Sales
   Counter > Configure). */
@media (max-width: 768px) {
    .ds-sales-counter {
        float: none;
        top: var(--ds-sc-top-mobile, 0px);
        left: var(--ds-sc-left-mobile, 0px);
    }
}

.ds-sales-counter__icon {
    display: inline-flex;
    flex-shrink: 0;
}

/* Badge style variants (Modules > Sales Counter > Configure > Badge style).
   Colors, border and radius still come from the settings above — these
   only change the shape. */
.ds-sales-counter--outline {
    background-color: transparent !important;
}

.ds-sales-counter--ribbon {
    border-radius: 0 !important;
    padding-left: 18px !important;
    clip-path: polygon(0% 50%, 10px 0%, 100% 0%, 100% 100%, 10px 100%);
}