/*
 * Codazon product labels as one pill style (layout handle galaxy_labels). Labels keep their Codazon markup:
 * ul.cdz-product-labels > li.label-item.<custom class> > .label-content. Inline styles typed into old labels are
 * overridden, so every label looks the same apart from its colour.
 */
body.gpdp-labels .cdz-product-labels {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.gpdp-labels .cdz-product-labels .label-item {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    position: static !important;
    text-align: left;
}
body.gpdp-labels .cdz-product-labels .label-item::before,
body.gpdp-labels .cdz-product-labels .label-item::after {
    display: none !important;
}
body.gpdp-labels .cdz-product-labels .label-content {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px 11px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #1d1d1f;
    color: #fff;
    font-family: 'Urbanist', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    line-height: 1.2 !important;
    text-transform: uppercase;
    white-space: nowrap;
    transform: none !important;
    position: static !important;
}
/* old labels wrap text in inline-styled divs and add image tags: flatten them into the pill */
body.gpdp-labels .cdz-product-labels .label-content > div,
body.gpdp-labels .cdz-product-labels .label-content > span {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    color: inherit !important;
    position: static !important;
    width: auto !important;
    top: auto !important;
    right: auto !important;
}
body.gpdp-labels .cdz-product-labels .label-content > div + div::before {
    content: ' · ';
}
body.gpdp-labels .cdz-product-labels .label-content img,
body.gpdp-labels .cdz-product-labels .label-content style {
    display: none !important;
}

/* colour by the label's Custom Class */
body.gpdp-labels .cdz-product-labels .save-offer-special .label-content {
    background: #cc2229 !important;
    color: #fff !important;
}
body.gpdp-labels .cdz-product-labels .cashback .label-content {
    background: #6bd8c3 !important;
    color: #123330 !important;
}
body.gpdp-labels .cdz-product-labels .clearance .label-content {
    background: #ffe14a !important;
    color: #1d1d1f !important;
    box-shadow: inset 0 0 0 1px #1d1d1f;
}
body.gpdp-labels .cdz-product-labels .noline-exclusive-prd .label-content,
body.gpdp-labels .cdz-product-labels .online-exclusive .label-content {
    background: #ffcc00 !important;
    color: #1d1d1f !important;
}

/* product page: the label row sits at the top-left of the main image */
body.gpdp-labels .gallery-container .label-wrap {
    top: 16px !important;
    right: auto !important;
    max-width: calc(100% - 28px);
}
@media (max-width: 767px) {
    body.gpdp-labels .cdz-product-labels .label-content {
        font-size: 10.5px !important;
        padding: 4px 9px !important;
    }
}

/* category cards / widgets: the pill row sits at the top-left of the product image */
body.gpdp-labels .product-list-style-28 .product-item-top > .cdz-product-labels,
body.gpdp-labels .product-item-top > .cdz-product-labels,
body.gpdp-labels .product-item-info > .cdz-product-labels {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    text-align: left !important;
    z-index: 3;
    pointer-events: none;
}
body.gpdp-labels .product-item-top > .cdz-product-labels .label-content,
body.gpdp-labels .product-item-info > .cdz-product-labels .label-content {
    font-size: 10.5px !important;
    padding: 4px 9px !important;
}