/* SimpleTools Shop Pro - independent functionality using WoodMart header visual classes. */
.stsd-wd-header-tool {
    position: relative;
}

/* WoodMart owns the icon shape, spacing and counter styling through its own
   wd-tools-element / wd-tools-icon / wd-tools-count selectors. */
.stsd-wd-header-tool > a {
    cursor: pointer;
}

.stsd-wd-header-label {
    display: none;
}

.stsd-wd-header-tool--with-label .stsd-wd-header-label {
    display: inline-block;
    margin-inline-start: 7px;
    white-space: nowrap;
}

/* Keep our counters visible at 0 and align the number exactly like WoodMart. */
.stsd-wd-header-tool .wd-tools-count {
    display: inline-block !important;
    z-index: 1;
    width: var(--wd-count-size, 15px);
    min-width: var(--wd-count-size, 15px);
    height: var(--wd-count-size, 15px);
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    text-indent: 0;
    letter-spacing: 0;
    font-weight: 400;
    line-height: var(--wd-count-size, 15px);
    vertical-align: middle;
}

@media (max-width: 1024px) {
    .stsd-wd-header-tool--with-label .stsd-wd-header-label {
        display: none;
    }
}

/* Exact WoodMart icon-font glyphs.
 * These variables normally come from WoodMart's native Wishlist/Compare element CSS.
 * Because the native features can be disabled, define only the glyph variables here
 * while leaving WoodMart responsible for the font, pseudo-element, sizing and styling. */
.stsd-wd-header-tool--favorites {
    --wd-tools-icon: "\f106";
}

.stsd-wd-header-tool--compare {
    --wd-tools-icon: "\f128";
}


/* Preferred combined header group to avoid extra spacing from multiple WoodMart Text/HTML elements. */
.stsd-wd-header-tools-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.stsd-wd-header-tools-group .stsd-wd-header-tool {
    margin: 0 !important;
}

.stsd-wd-header-tools-group .stsd-wd-header-tool > a {
    display: inline-flex;
    align-items: center;
}

/* If the tools are placed side by side in the same HTML block without the group wrapper, keep the gap compact. */
.stsd-wd-header-tool + .stsd-wd-header-tool {
    margin-inline-start: 12px;
}