/* Cloudmaple WooLabels — Frontend Styles */

/* Wrapper around the product image — needed for positioning context */
.cwl-product-image-wrap {
    display: block;
    position: relative;
    line-height: 0; /* Prevents inline-block gap under image */
    /* Extend to fill the full image cell — neutralise any inherited padding */
    margin: 0;
    padding: 0;
}

.cwl-product-image-wrap > img,
.cwl-product-image-wrap > a > img,
.cwl-product-image-wrap img {
    display: block;
    width: 100%;
    margin: 0;
}

/* Container holding all labels for one product */
.cwl-labels-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

/* Each group = one corner, labels sit side by side in a flex row */
.cwl-label-group {
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start; /* each label only as tall as its own content */
    gap: 4px;
    pointer-events: none;
}

/* Corner positions — flush to image edge by default.
   Add padding via your own CSS class on the label if you need inset. */
.cwl-group-top-left {
    top: 0;
    left: 0;
    justify-content: flex-start;
}

.cwl-group-top-right {
    top: 0;
    right: 0;
    justify-content: flex-end;
}

/* Labels inside right-side groups: arrow points LEFT (mirrored ribbon) */
.cwl-group-top-right .cwl-label,
.cwl-group-bottom-right .cwl-label {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
    padding: 5px 10px 5px 18px;
}

/* Image labels in right groups also get no clip-path */
.cwl-group-top-right .cwl-label.cwl-label-is-image,
.cwl-group-bottom-right .cwl-label.cwl-label-is-image {
    clip-path: none;
    padding: 0;
}

.cwl-group-bottom-left {
    bottom: 0;
    left: 0;
    justify-content: flex-start;
}

.cwl-group-bottom-right {
    bottom: 0;
    right: 0;
    justify-content: flex-end;
}

/* Base label style — ribbon shape by default */
.cwl-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    padding: 5px 18px 5px 10px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    /* Default colour — override with CSS class */
    background: #333;
    color: #fff;
}

/* Image label — strip text-label chrome, size independently, no ribbon clip-path */
.cwl-label.cwl-label-is-image {
    background: none;
    padding: 0;
    border-radius: 0;
    clip-path: none;
}

.cwl-label-image {
    display: block;
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
}

/* ============================================================
   Built-in colour helper classes
   Use these as CSS Class values in the label editor,
   or define your own in your theme.
   ============================================================ */

.cwl-red    { background: #e02020; color: #fff; }
.cwl-green  { background: #27ae60; color: #fff; }
.cwl-blue   { background: #2980b9; color: #fff; }
.cwl-orange { background: #e67e22; color: #fff; }
.cwl-black  { background: #111;    color: #fff; }
.cwl-white  { background: #fff;    color: #333; border: 1px solid #ccc; }
.cwl-yellow { background: #f1c40f; color: #333; }

/* Shape helpers */

/* cwl-ribbon is now the default shape — kept as alias for compatibility */
.cwl-ribbon { /* no-op — ribbon is the default .cwl-label shape */ }

/* Square — flat rectangle, no clip-path */
.cwl-square,
.cwl-group-top-right .cwl-square,
.cwl-group-bottom-right .cwl-square {
    clip-path: none;
    border-radius: 0;
    padding: 4px 8px;
}

/* Pill — rounded ends, no clip-path */
.cwl-pill,
.cwl-group-top-right .cwl-pill,
.cwl-group-bottom-right .cwl-pill {
    clip-path: none;
    border-radius: 20px;
    padding: 4px 12px;
}

/* Round — circle */
.cwl-round,
.cwl-group-top-right .cwl-round,
.cwl-group-bottom-right .cwl-round {
    clip-path: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 10px;
}

/* Teal — matches the reference screenshot colour */
.cwl-teal { background: #0099a8; color: #fff; }

/* ============================================================
   Single product page — label overlay on Astra Pro gallery
   ============================================================ */

/*
 * Astra renders .woocommerce-product-gallery with position:relative.
 * We output .cwl-single-labels-container as a sibling BEFORE the gallery
 * via woocommerce_before_single_product_summary (priority 25, gallery is 20).
 * Use negative margin + pointer-events:none so it overlays without shifting layout.
 */
.woocommerce-product-gallery {
    position: relative; /* ensure — Astra sets this but just in case */
}

.cwl-single-labels-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

/*
 * Because the container is output BEFORE the gallery in DOM order,
 * we use JS to move it inside the gallery after DOM ready.
 * The inline script is in woolabels-single.js enqueued below.
 * As a CSS-only fallback: if the container sits just before the gallery,
 * float/absolute won't work cross-theme. JS relocation is the reliable path.
 */