/* Auto-generated CSS Module: ribbons | ISO: lb_LU */
/* --- Source: nl_NL / 1-ribbon-framework.css --- */
/* 
   =============================================================
   UNIVERSAL CSS RIBBON FRAMEWORK
   Supports Corner & Horizontal, Left & Right
   Controlled via CSS Variables from inline styles
   =============================================================
*/

/* Core Color Mapping */
.custom-colors {
    --color-main: #c0392b;
    --color-light: #e74c3c;
    --color-dark: #922b21;
    --color-shadow: #641e16;
}

/* =========================================================
   1. HORIZONTAL RIBBONS
   ========================================================= */
.ribbon-horizontal-left { position: absolute; top: var(--rb-y, 20px); left: calc(-1 * var(--rb-offset, 10px)); z-index: 10; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2)); pointer-events: none; width: auto; }
.ribbon-horizontal-left::after { content: ""; position: absolute; bottom: calc(-1 * var(--rb-offset, 10px)); left: 0; border-top: var(--rb-offset, 10px) solid var(--color-shadow); border-left: var(--rb-offset, 10px) solid transparent; z-index: -1; }
.ribbon-horizontal-left .ribbon-body { background: var(--color-main); height: var(--rb-thickness, 36px); padding: 0 20px; display: inline-flex; align-items: center; border-radius: 0 4px 4px 0; position: relative; transform: rotate(var(--rb-angle, 0deg)); transform-origin: left bottom; white-space: nowrap; width: auto; }

.ribbon-horizontal-right { position: absolute; top: var(--rb-y, 20px); right: calc(-1 * var(--rb-offset, 10px)); z-index: 10; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2)); pointer-events: none; width: auto; }
.ribbon-horizontal-right::after { content: ""; position: absolute; bottom: calc(-1 * var(--rb-offset, 10px)); right: 0; border-top: var(--rb-offset, 10px) solid var(--color-shadow); border-right: var(--rb-offset, 10px) solid transparent; z-index: -1; }
.ribbon-horizontal-right .ribbon-body { background: var(--color-main); height: var(--rb-thickness, 36px); padding: 0 20px; display: inline-flex; align-items: center; border-radius: 4px 0 0 4px; transform: rotate(var(--rb-angle, 0deg)); transform-origin: right bottom; white-space: nowrap; width: auto; }

.ribbon-text-horiz { color: var(--rb-color, #fff); font-size: var(--rb-size, 14px); font-weight: bold; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }

/* =========================================================
   2. CORNER RIBBONS (RIGHT)
   ========================================================= */
.ribbon-right { position: absolute; overflow: hidden; pointer-events: none; z-index: 10; }
.ribbon-right:before { content: ""; display: block; position: absolute; top: 0; background: linear-gradient(to right, var(--color-light) 1%, var(--color-shadow) 45%); }
.ribbon-right:after { content: ""; display: block; position: absolute; right: 0; background: linear-gradient(to bottom, var(--color-shadow) 55%, var(--color-light) 99%); }
.ribbon-right .ribbon-body { position: relative; z-index: 1; overflow: hidden; transform: rotate(45deg); background: linear-gradient(to right, var(--color-main) 0%, var(--color-light) 51%, var(--color-dark) 100%); }
.ribbon-right .ribbon-body:before { content: ""; display: block; position: absolute; transform: rotate(45deg); background: linear-gradient(to right, rgba(255,255,255,0) 1%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); }
.ribbon-right .ribbon-body:after { content: ""; display: block; position: absolute; transform: rotate(-45deg); background: linear-gradient(to right, rgba(255,255,255,0) 1%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); }

.ribbon-right.size-medium { width: 200px; height: 200px; top: -10px; right: -10px; }
.ribbon-right.size-medium:before { width: 50px; height: 10px; right: 86px; border-radius: 10px 10px 0 0; }
.ribbon-right.size-medium:after { width: 10px; height: 50px; top: 85px; border-radius: 0 10px 10px 0; }
.ribbon-right.size-medium .ribbon-body { width: 200px; height: 40px; top: 30px; right: -50px; box-shadow: inset 0 0 0 3px var(--color-main), inset 0 0 0 4px rgba(0,0,0,0.5), inset 0 0 0 5px rgba(255,255,255,0.4), 0 21px 5px -18px rgba(0,0,0,0.8); }
.ribbon-right.size-medium .ribbon-body:before { height: 72px; width: 13px; top: -13px; left: 27px; }
.ribbon-right.size-medium .ribbon-body:after { height: 72px; width: 13px; top: -18px; left: 154px; }

.ribbon-right.size-large { width: 260px; height: 260px; top: -13px; right: -13px; }
.ribbon-right.size-large:before { width: 65px; height: 13px; right: 112px; border-radius: 13px 13px 0 0; }
.ribbon-right.size-large:after { width: 13px; height: 65px; top: 110px; border-radius: 0 13px 13px 0; }
.ribbon-right.size-large .ribbon-body { width: 260px; height: 52px; top: 39px; right: -65px; box-shadow: inset 0 0 0 4px var(--color-main), inset 0 0 0 5px rgba(0,0,0,0.5), inset 0 0 0 6px rgba(255,255,255,0.4), 0 27px 6px -23px rgba(0,0,0,0.8); }
.ribbon-right.size-large .ribbon-body:before { height: 93px; width: 17px; top: -17px; left: 35px; }
.ribbon-right.size-large .ribbon-body:after { height: 93px; width: 17px; top: -23px; left: 200px; }

.ribbon-right.size-small { width: 150px; height: 150px; top: -7px; right: -7px; }
.ribbon-right.size-small:before { width: 37px; height: 7px; right: 64px; border-radius: 7px 7px 0 0; }
.ribbon-right.size-small:after { width: 7px; height: 37px; top: 63px; border-radius: 0 7px 7px 0; }
.ribbon-right.size-small .ribbon-body { width: 150px; height: 30px; top: 22px; right: -37px; box-shadow: inset 0 0 0 2px var(--color-main), inset 0 0 0 3px rgba(0,0,0,0.5), inset 0 0 0 4px rgba(255,255,255,0.4), 0 16px 4px -13px rgba(0,0,0,0.8); }
.ribbon-right.size-small .ribbon-body:before { height: 54px; width: 10px; top: -10px; left: 20px; }
.ribbon-right.size-small .ribbon-body:after { height: 54px; width: 10px; top: -13px; left: 115px; }

/* =========================================================
   3. CORNER RIBBONS (LEFT)
   ========================================================= */
.ribbon-left { position: absolute; overflow: hidden; pointer-events: none; z-index: 10; }
.ribbon-left:before { content: ""; display: block; position: absolute; top: 0; background: linear-gradient(to left, var(--color-light) 1%, var(--color-shadow) 45%); }
.ribbon-left:after { content: ""; display: block; position: absolute; left: 0; background: linear-gradient(to bottom, var(--color-shadow) 55%, var(--color-light) 99%); }
.ribbon-left .ribbon-body { position: relative; z-index: 1; overflow: hidden; transform: rotate(-45deg); background: linear-gradient(to left, var(--color-main) 0%, var(--color-light) 51%, var(--color-dark) 100%); }
.ribbon-left .ribbon-body:before { content: ""; display: block; position: absolute; transform: rotate(45deg); background: linear-gradient(to left, rgba(255,255,255,0) 1%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); }
.ribbon-left .ribbon-body:after { content: ""; display: block; position: absolute; transform: rotate(-45deg); background: linear-gradient(to left, rgba(255,255,255,0) 1%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); }

.ribbon-left.size-medium { width: 200px; height: 200px; top: -10px; left: -10px; }
.ribbon-left.size-medium:before { width: 50px; height: 10px; top: 0; right: 54px; border-radius: 10px 10px 0 0; }
.ribbon-left.size-medium:after { width: 10px; height: 50px; left: 0; top: 85px; border-radius: 10px 0 0 10px; }
.ribbon-left.size-medium .ribbon-body { width: 200px; height: 40px; top: 30px; left: -50px; box-shadow: inset 0 0 0 3px var(--color-main), inset 0 0 0 4px rgba(0,0,0,0.5), inset 0 0 0 5px rgba(255,255,255,0.4), 0 21px 5px -18px rgba(0,0,0,0.8); }
.ribbon-left.size-medium .ribbon-body:before { height: 72px; width: 13px; top: -18px; right: 154px; }
.ribbon-left.size-medium .ribbon-body:after { height: 72px; width: 13px; top: -13px; right: 27px; }

.ribbon-left.size-large { width: 260px; height: 260px; top: -13px; left: -13px; }
.ribbon-left.size-large:before { width: 65px; height: 13px; top: 0; right: 70px; border-radius: 13px 13px 0 0; }
.ribbon-left.size-large:after { width: 13px; height: 65px; left: 0; top: 110px; border-radius: 13px 0 0 13px; }
.ribbon-left.size-large .ribbon-body { width: 260px; height: 52px; top: 39px; left: -65px; box-shadow: inset 0 0 0 4px var(--color-main), inset 0 0 0 5px rgba(0,0,0,0.5), inset 0 0 0 6px rgba(255,255,255,0.4), 0 27px 6px -23px rgba(0,0,0,0.8); }
.ribbon-left.size-large .ribbon-body:before { height: 93px; width: 17px; top: -23px; right: 200px; }
.ribbon-left.size-large .ribbon-body:after { height: 93px; width: 17px; top: -17px; right: 35px; }

.ribbon-left.size-small { width: 150px; height: 150px; top: -7px; left: -7px; }
.ribbon-left.size-small:before { width: 37px; height: 7px; top: 0; right: 41px; border-radius: 7px 7px 0 0; }
.ribbon-left.size-small:after { width: 7px; height: 37px; left: 0; top: 63px; border-radius: 7px 0 0 7px; }
.ribbon-left.size-small .ribbon-body { width: 150px; height: 30px; top: 22px; left: -37px; box-shadow: inset 0 0 0 2px var(--color-main), inset 0 0 0 3px rgba(0,0,0,0.5), inset 0 0 0 4px rgba(255,255,255,0.4), 0 16px 4px -13px rgba(0,0,0,0.8); }
.ribbon-left.size-small .ribbon-body:before { height: 54px; width: 10px; top: -13px; right: 115px; }
.ribbon-left.size-small .ribbon-body:after { height: 54px; width: 10px; top: -10px; right: 20px; }

.ribbon-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--rb-color, #fff); font-family: Arial, sans-serif; font-weight: bold; text-transform: uppercase; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); z-index: 10; font-size: var(--rb-size, 14px); }

/* =========================================================
   4. XLARGE RIBBONS (PRODUCT DETAIL PAGE)
   Dynamically scaled from size-large for perfect math
   ========================================================= */
.ribbon-right.size-xlarge {
    width: 260px; height: 260px; 
    top: -13px; right: -13px; 
    transform: scale(1.5); 
    transform-origin: top right;
}
.ribbon-left.size-xlarge {
    width: 260px; height: 260px; 
    top: -13px; left: -13px; 
    transform: scale(1.5); 
    transform-origin: top left;
}