/* custom-shirts.css - Styling for customized shirts on the homepage */

/* Mobile view - hide custom shirts and show original shirts below 600px */
@media screen and (max-width: 600px) {
    /* Hide custom shirts on mobile */
    .custom-shirt-container {
        display: none !important;
    }
    
    /* Show original shirts on mobile */
    .shirt-image {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        /* Let the original transition apply */
    }
    
    /* The original hover effect from styles.css will apply here */
}

/* For desktop and tablets (above 600px): 
   Show standard shirts by default, custom shirts only on hover */
@media screen and (min-width: 601px) {
    /* Show standard shirts by default */
    .shirt-image {
        opacity: 1 !important;
    }
    
    /* Custom shirts hidden by default */
    .custom-shirt-container {
        opacity: 0;
        position: absolute;
        z-index: 5;
        filter: drop-shadow(0 0 4px rgba(147, 51, 234, 0.3));
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* When hovering, show custom shirt with same effect as standard shirts */
    .custom-shirt-container:hover {
        opacity: 1;
        transform: scale(1.1);
        z-index: 10;
        filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.5));
    }
    
    /* Hide original shirt when hovering on custom shirt */
    .custom-shirt-container:hover + .shirt-image {
        opacity: 0 !important;
        transform: none !important; /* Prevent growth animation */
        filter: none !important; /* Remove glow effect */
    }

    /* Disable hover effects on standard shirts that have custom versions */
    .shirt-image.has-custom-version {
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .shirt-image.has-custom-version:hover {
        transform: none !important;
        filter: drop-shadow(0 0 4px rgba(147, 51, 234, 0.3)) !important;
        z-index: 2 !important;
    }
}

/* Container for customized shirts - positioned exactly like the original image */
.custom-shirt-container {
    position: absolute;
    overflow: visible;
    cursor: pointer;
    transform-origin: center center;
    filter: drop-shadow(0 0 4px rgba(147, 51, 234, 0.3));
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove individual transforms from spot fixes */
#spot-fix-4,
#spot-fix-7,
#spot-fix-8,
#spot-fix-9,
#spot-fix-10,
#spot-fix-11,
#spot-fix-12,
#spot-fix-13,
#spot-fix-14,
#spot-fix-16,
#spot-fix-17,
#spot-fix-18,
#spot-fix-22 {
    transform: none !important;
}

/* Apply transforms only to parent container for uniform scaling - exclude spot fixes that need rotation */
.custom-shirt-container.shirt-hover {
    transform: scale(1.1);
    z-index: 10;
    filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.5));
}

/* ===== SHIRT CONTAINER ===== */

/* Shirt container - matches the structure in focused shirt pages */
.custom-shirt-container .shirt-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Focused shirt image - positioned on top of the color layer */
.custom-shirt-container .focused-shirt {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2; /* Above the color layer */
}

/* Color layer - positioned behind the shirt image */
.custom-shirt-container .color-layer {
    position: absolute;
    width: 52%;
    height: 72%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Behind the shirt */
    mix-blend-mode: multiply;
    opacity: 0.9;
}

/* Color distribution sections - hidden by default but needed for structure */
.custom-shirt-container .color-layer .tertiary-left,
.custom-shirt-container .color-layer .main-color,
.custom-shirt-container .color-layer .tertiary-right {
    display: none;
}

/* ===== HARBINGER-SPECIFIC PATTERNS (SHIRT ID 1) ===== */

/* Pattern One (Square with half-circle) - DEFAULT BLACK SHIRT */
.custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-one {
    position: absolute;
    width: 52%;
    height: 72%;
    left: 50.2%;
    top: 52%;
    transform: translate(-50%, -50%);
    display: block;
    background-color: var(--main-color, #4dff00);
    opacity: 1;
    z-index: 1;
    overflow: hidden;
}

/* True half-circle of tertiary color in the center */
.custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-one::after {
    content: '';
    position: absolute;
    width: 80%;
    aspect-ratio: 2/1;
    left: 9.2%;
    top: 14%;
    transform: translateY(-50%);
    background-color: transparent;
    background-image: radial-gradient(
        ellipse 50% 100% at 50% 0%, 
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 15%,
        var(--tertiary-color, #c20037) 60%, 
        rgba(0,0,0,0) 100%
    );
    border-radius: 0 0 100px 100px;
    z-index: 2;
}

/* Square of tertiary color with main color line in the middle */
.custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-one::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 20%;
    left: 10%;
    top: 55%;
    background-color: var(--tertiary-color, #c20037);
    z-index: 2;
    background-image: linear-gradient(
        to right,
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 20%,
        var(--main-color, #4dff00) 50%,
        var(--tertiary-color, #c20037) 80%,
        var(--tertiary-color, #c20037) 100%
    );
}

/* Pattern Two (Two vertical stripes) - DEFAULT BLACK SHIRT */
.custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-two {
    position: absolute;
    width: 52%;
    height: 72%;
    left: 50.2%;
    top: 52%;
    transform: translate(-50%, -50%);
    display: block;
    opacity: 1;
    z-index: 1;
    background-image: linear-gradient(to right,
        var(--main-color, #4dff00) 0%,
        var(--main-color, #4dff00) 10%,
        var(--tertiary-color, #c20037) 29%,
        var(--main-color, #4dff00) 45%,
        var(--main-color, #4dff00) 55%,
        var(--tertiary-color, #c20037) 71%,
        var(--main-color, #4dff00) 90%,
        var(--main-color, #4dff00) 100%);
}

/* Add shorter secondary color layer with swapped colors */
.custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-two::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 30%;
    left: 0;
    top: 52%;
    background-image: linear-gradient(to right,
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 10%,
        var(--main-color, #4dff00) 29%,
        var(--tertiary-color, #c20037) 45%,
        var(--tertiary-color, #c20037) 55%,
        var(--main-color, #4dff00) 71%,
        var(--tertiary-color, #c20037) 90%,
        var(--tertiary-color, #c20037) 100%);
    z-index: 2;
    opacity: 1;
}

/* Pattern Three (Gradient square) - DEFAULT BLACK SHIRT */
.custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-three {
    position: absolute;
    width: 52%;
    height: 58%;
    left: 50.2%;
    top: 44%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    background-image: linear-gradient(
        to top,
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 25%,
        var(--main-color, #4dff00) 75%,
        var(--main-color, #4dff00) 100%
    );
    opacity: 1;
}

/* ===== WHITE SHIRT CUSTOMIZATIONS FOR HARBINGER ===== */

/* Pattern One (Square with half-circle) - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-one {
    position: absolute;
    width: 52%;
    height: 72%;
    left: 49.3%;
    top: 52%;
    transform: translate(-50%, -50%);
    display: block;
    background-color: var(--main-color, #4dff00);
    opacity: 1;
    z-index: 1;
    overflow: hidden;
}

/* White shirt half-circle */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-one::after {
    content: '';
    position: absolute;
    width: 80%;
    aspect-ratio: 2/1;
    left: 9.2%;
    top: 17%;
    transform: translateY(-50%);
    background-color: transparent;
    background-image: radial-gradient(
        ellipse 50% 100% at 50% 0%, 
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 15%,
        var(--tertiary-color, #c20037) 60%, 
        rgba(0,0,0,0) 100%
    );
    border-radius: 0 0 100px 100px;
    z-index: 2;
}

/* White shirt square with line */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-one::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 20%;
    left: 9.43%;
    top: 55%;
    background-color: var(--tertiary-color, #c20037);
    z-index: 2;
    background-image: linear-gradient(
        to right,
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 20%,
        var(--main-color, #4dff00) 50%,
        var(--tertiary-color, #c20037) 80%,
        var(--tertiary-color, #c20037) 100%
    );
}

/* Pattern Two (Two vertical stripes) - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-two {
    background-image: linear-gradient(to right,
        var(--main-color, #4dff00) 0%,
        var(--main-color, #4dff00) 10%,
        var(--tertiary-color, #c20037) 29%,
        var(--main-color, #4dff00) 45%,
        var(--main-color, #4dff00) 55%,
        var(--tertiary-color, #c20037) 71%,
        var(--main-color, #4dff00) 90%,
        var(--main-color, #4dff00) 100%);
    width: 52%;
    left: 49%;
    display: block;
    opacity: 1;
    z-index: 1;
    position: absolute;
    height: 72%;
    top: 52%;
    transform: translate(-50%, -50%);
}

/* White shirt secondary layer with swapped colors */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-two::after {
    background-image: linear-gradient(to right,
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 10%,
        var(--main-color, #4dff00) 29%,
        var(--tertiary-color, #c20037) 45%,
        var(--tertiary-color, #c20037) 55%,
        var(--main-color, #4dff00) 71%,
        var(--tertiary-color, #c20037) 90%,
        var(--tertiary-color, #c20037) 100%);
    width: 100%;
    height: 30%;
    left: 0;
    top: 58%;
    z-index: 2;
    opacity: 1;
}

/* Pattern Three (Gradient square) - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-three {
    position: absolute;
    width: 52%;
    height: 58%;
    left: 49%;
    top: 44%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    background-image: linear-gradient(
        to top,
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 25%,
        var(--main-color, #4dff00) 75%,
        var(--main-color, #4dff00) 100%
    );
    opacity: 0.8;
    mix-blend-mode: multiply;
}

/* ===== CAMO SHIRT CUSTOMIZATIONS FOR HARBINGER ===== */

/* Pattern One (Square with half-circle) - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-one {
    position: absolute;
    width: 52%;
    height: 69%;
    left: 50.2%;
    top: 53%;
    transform: translate(-50%, -50%);
    display: block;
    background-color: var(--main-color, #4dff00);
    opacity: 1;
    z-index: 2;
    overflow: hidden;
}

/* Camo shirt half-circle */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-one::after {
    content: '';
    position: absolute;
    width: 80%;
    aspect-ratio: 2/1;
    left: 9.2%;
    top: 19%;
    transform: translateY(-50%);
    background-color: transparent;
    background-image: radial-gradient(
        ellipse 50% 100% at 50% 0%, 
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 15%,
        var(--tertiary-color, #c20037) 60%, 
        rgba(0,0,0,0) 100%
    );
    border-radius: 0 0 100px 100px;
    z-index: 3;
}

/* Camo shirt square with line */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-one::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 20%;
    left: 9.42%;
    top: 58%;
    background-color: var(--tertiary-color, #c20037);
    z-index: 3;
    background-image: linear-gradient(
        to right,
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 20%,
        var(--main-color, #4dff00) 50%,
        var(--tertiary-color, #c20037) 80%,
        var(--tertiary-color, #c20037) 100%
    );
}

/* Pattern Two (Two vertical stripes) - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-two {
    background-image: linear-gradient(to right,
        var(--main-color, #4dff00) 0%,
        var(--main-color, #4dff00) 10%,
        var(--tertiary-color, #c20037) 29%,
        var(--main-color, #4dff00) 45%,
        var(--main-color, #4dff00) 55%,
        var(--tertiary-color, #c20037) 71%,
        var(--main-color, #4dff00) 90%,
        var(--main-color, #4dff00) 100%);
    width: 55%;
    left: 50%;
    display: block;
    opacity: 1;
    z-index: 2;
    position: absolute;
    height: 64%;
    top: 54%;
    transform: translate(-50%, -50%);
}

/* Camo shirt secondary layer with swapped colors */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-two::after {
    background-image: linear-gradient(to right,
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 10%,
        var(--main-color, #4dff00) 29%,
        var(--tertiary-color, #c20037) 45%,
        var(--tertiary-color, #c20037) 55%,
        var(--main-color, #4dff00) 71%,
        var(--tertiary-color, #c20037) 90%,
        var(--tertiary-color, #c20037) 100%);
    width: 100%;
    height: 30%;
    left: 0;
    top: 63%;
    z-index: 2;
    opacity: 1;
}

/* Pattern Three (Gradient square) - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-three {
    position: absolute;
    width: 52%;
    height: 58%;
    left: 50.2%;
    top: 48%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    background-image: linear-gradient(
        to top,
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 25%,
        var(--main-color, #4dff00) 75%,
        var(--main-color, #4dff00) 100%
    );
    opacity: 1;
    overflow: hidden;
}

/* ===== GRIZZLY-SPECIFIC PATTERNS (SHIRT ID 3) ===== */

/* Pattern One (Horizontal gradient with SVG mask ring) - DEFAULT BLACK SHIRT */
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-one {
    position: absolute;
    width: 52%;
    height: 52%;
    left: 50.2%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: linear-gradient(to right,
        var(--main-color, #4dff00) 0%,
        var(--main-color, #4dff00) 30%, 
        var(--tertiary-color, #c20037) 70%,
        var(--tertiary-color, #c20037) 100%);
    display: block;
    opacity: 1;
}

/* Add a ring with horizontal gradient and cutouts */
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-one::after {
    content: '';
    position: absolute;
    top: -14%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
        var(--tertiary-color, #c20037) 0%,
        var(--tertiary-color, #c20037) 30%, 
        var(--main-color, #4dff00) 70%,
        var(--main-color, #4dff00) 100%);
    z-index: 2;
    opacity: 1;
    /* SVG mask with ring and cutouts */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='ringMask'%3E%3Crect width='100' height='100' fill='black'/%3E%3Ccircle cx='50' cy='50' r='35' fill='white'/%3E%3Ccircle cx='50' cy='50' r='26' fill='black'/%3E%3C!-- Spot fix 9 - triangle up --%3E%3Cpolygon points='73.457,72.4 69.537,80.24 77.377,80.24' transform='rotate(-15 73.457 76.32)' fill='black'/%3E%3C!-- Spot fix 11 - triangle left --%3E%3Cpolygon points='83.94,65.4 80.94,75.24 73.1,71.32' transform='rotate(-20 77.02 71.32)' fill='black'/%3E%3C!-- Spot fix 12 - triangle right --%3E%3Cpolygon points='72.3,72.4 72.3,80.24 80.14,76.32' transform='rotate(12 76.22 76.32)' fill='black'/%3E%3C!-- Spot fix 13 - triangle up-right --%3E%3Cpolygon points='67.07,83.64 74.91,75.8 74.91,83.64' transform='rotate(-45 70.99 79.72)' fill='black'/%3E%3C!-- Spot fix 14 - triangle up-left --%3E%3Cpolygon points='71.0,74.1 71.0,82.0 78.8,74.1' transform='rotate(90 74.9 78.05)' fill='black'/%3E%3C!-- Spot fix 15 - diamond --%3E%3Cpolygon points='76.02,70.2 79.94,74.12 76.02,78.04 72.1,74.12' fill='black'/%3E%3C!-- Spot fix 16 - equilateral triangle --%3E%3Cpolygon points='65.6,66.2 69.52,59.4 73.44,66.2' transform='rotate(20 69.52 62.8)' fill='black'/%3E%3C!-- Spot fix 17 - right pointing triangle --%3E%3Cpolygon points='20.1,52.9 20.1,64.7 31.0,58.8' transform='rotate(32 25.55 58.8)' fill='black'/%3E%3C!-- Spot fix 18 - upside down triangle --%3E%3Cpolygon points='20.1,66.9 31.86,66.9 25.98,78.66' transform='rotate(12 25.98 72.78)' fill='black'/%3E%3C!-- Spot fix 20 - circle cutout --%3E%3Ccircle cx='28.35' cy='53.35' r='7.35' fill='black'/%3E%3C!-- Spot fix 21 - square cutout --%3E%3Crect x='18.1' y='59.9' width='11.76' height='11.76' fill='black'/%3E%3C!-- New diamond at spot-fix-21 location --%3E%3Cpolygon points='24.86,58.0 31.72,66.66 24.86,75.32 18.0,66.66' fill='black'/%3E%3C!-- Spot fix 22 - triangle cutout --%3E%3Cpolygon points='22.46,53.9 15.6,67.62 29.32,67.62' transform='rotate(-12 22.46 60.76)' fill='black'/%3E%3C!-- New square near spot-fix-22 --%3E%3Crect x='10' y='67' width='8' height='8' fill='black'/%3E%3C!-- Square at bottom left of circle --%3E%3Crect x='15' y='59' width='15' height='15' transform='rotate(45 22.5 66.5)' fill='black'/%3E%3C!-- Clone of spot-fix-16 triangle (60% of original size, rotated 75 degrees) --%3E%3Cpolygon points='68.57,68.92 70.92,64.84 73.27,68.92' transform='rotate(75 70.92,66.2)' fill='black'/%3E%3C!-- Second clone of triangle positioned lower --%3E%3Cpolygon points='68.57,79.67 70.92,75.59 73.27,79.67' transform='rotate(255 70.92,76.95)' fill='black'/%3E%3C!-- Third clone of triangle positioned to the right --%3E%3Cpolygon points='68.57,80.67 70.92,76.59 73.27,80.67' transform='rotate(150 70.92,78.63)' fill='black'/%3E%3C!-- Fourth clone of triangle (identical to third but slightly higher) --%3E%3Cpolygon points='81.57,58.67 83.92,54.59 86.27,58.67' transform='rotate(105 83.92,56.63)' fill='black'/%3E%3C!-- Fifth clone of triangle (to the left of the fourth one) --%3E%3Cpolygon points='67.53,59.06 73.92,48.20 80.31,59.06' transform='rotate(45 73.92,53.63)' fill='black'/%3E%3C!-- Sixth clone of triangle (down-right from the fourth one at 315 degree angle) --%3E%3Cpolygon points='82.57,59.67 84.92,55.59 87.27,59.67' transform='rotate(105 84.92,57.63)' fill='black'/%3E%3C!-- Seventh clone of triangle (close to the left of the fourth one) --%3E%3Cpolygon points='73.37,47.47 75.72,43.39 78.07,47.47' transform='rotate(75 75.72,45.43)' fill='black'/%3E%3C/mask%3E%3Crect width='100' height='100' mask='url(%23ringMask)' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='ringMask'%3E%3Crect width='100' height='100' fill='black'/%3E%3Ccircle cx='50' cy='50' r='35' fill='white'/%3E%3Ccircle cx='50' cy='50' r='26' fill='black'/%3E%3C!-- Spot fix 9 - triangle up --%3E%3Cpolygon points='73.457,72.4 69.537,80.24 77.377,80.24' transform='rotate(-15 73.457 76.32)' fill='black'/%3E%3C!-- Spot fix 11 - triangle left --%3E%3Cpolygon points='83.94,65.4 80.94,75.24 73.1,71.32' transform='rotate(-20 77.02 71.32)' fill='black'/%3E%3C!-- Spot fix 12 - triangle right --%3E%3Cpolygon points='72.3,72.4 72.3,80.24 80.14,76.32' transform='rotate(12 76.22 76.32)' fill='black'/%3E%3C!-- Spot fix 13 - triangle up-right --%3E%3Cpolygon points='67.07,83.64 74.91,75.8 74.91,83.64' transform='rotate(-45 70.99 79.72)' fill='black'/%3E%3C!-- Spot fix 14 - triangle up-left --%3E%3Cpolygon points='71.0,74.1 71.0,82.0 78.8,74.1' transform='rotate(90 74.9 78.05)' fill='black'/%3E%3C!-- Spot fix 15 - diamond --%3E%3Cpolygon points='76.02,70.2 79.94,74.12 76.02,78.04 72.1,74.12' fill='black'/%3E%3C!-- Spot fix 16 - equilateral triangle --%3E%3Cpolygon points='65.6,66.2 69.52,59.4 73.44,66.2' transform='rotate(20 69.52 62.8)' fill='black'/%3E%3C!-- Spot fix 17 - right pointing triangle --%3E%3Cpolygon points='20.1,52.9 20.1,64.7 31.0,58.8' transform='rotate(32 25.55 58.8)' fill='black'/%3E%3C!-- Spot fix 18 - upside down triangle --%3E%3Cpolygon points='20.1,66.9 31.86,66.9 25.98,78.66' transform='rotate(12 25.98 72.78)' fill='black'/%3E%3C!-- Spot fix 20 - circle cutout --%3E%3Ccircle cx='28.35' cy='53.35' r='7.35' fill='black'/%3E%3C!-- Spot fix 21 - square cutout --%3E%3Crect x='18.1' y='59.9' width='11.76' height='11.76' fill='black'/%3E%3C!-- New diamond at spot-fix-21 location --%3E%3Cpolygon points='24.86,58.0 31.72,66.66 24.86,75.32 18.0,66.66' fill='black'/%3E%3C!-- Spot fix 22 - triangle cutout --%3E%3Cpolygon points='22.46,53.9 15.6,67.62 29.32,67.62' transform='rotate(-12 22.46 60.76)' fill='black'/%3E%3C!-- New square near spot-fix-22 --%3E%3Crect x='10' y='67' width='8' height='8' fill='black'/%3E%3C!-- Square at bottom left of circle --%3E%3Crect x='15' y='59' width='15' height='15' transform='rotate(45 22.5 66.5)' fill='black'/%3E%3C!-- Clone of spot-fix-16 triangle (60% of original size, rotated 75 degrees) --%3E%3Cpolygon points='68.57,68.92 70.92,64.84 73.27,68.92' transform='rotate(75 70.92,66.2)' fill='black'/%3E%3C!-- Second clone of triangle positioned lower --%3E%3Cpolygon points='68.57,79.67 70.92,75.59 73.27,79.67' transform='rotate(255 70.92,76.95)' fill='black'/%3E%3C!-- Third clone of triangle positioned to the right --%3E%3Cpolygon points='68.57,80.67 70.92,76.59 73.27,80.67' transform='rotate(150 70.92,78.63)' fill='black'/%3E%3C!-- Fourth clone of triangle (identical to third but slightly higher) --%3E%3Cpolygon points='81.57,58.67 83.92,54.59 86.27,58.67' transform='rotate(105 83.92,56.63)' fill='black'/%3E%3C!-- Fifth clone of triangle (to the left of the fourth one) --%3E%3Cpolygon points='67.53,59.06 73.92,48.20 80.31,59.06' transform='rotate(45 73.92,53.63)' fill='black'/%3E%3C!-- Sixth clone of triangle (down-right from the fourth one at 315 degree angle) --%3E%3Cpolygon points='82.57,59.67 84.92,55.59 87.27,59.67' transform='rotate(105 84.92,57.63)' fill='black'/%3E%3C!-- Seventh clone of triangle (close to the left of the fourth one) --%3E%3Cpolygon points='73.37,47.47 75.72,43.39 78.07,47.47' transform='rotate(75 75.72,45.43)' fill='black'/%3E%3C/mask%3E%3Crect width='100' height='100' mask='url(%23ringMask)' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Hide the section divs for pattern one */
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-one .tertiary-left,
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-one .main-color,
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-one .tertiary-right {
    display: none;
}

/* Pattern One - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.white-shirt .color-layer.pattern-one {
    width: 53%;
    height: 53%;
    left: 49.3%;
    top: 48.5%;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
    opacity: 0.85;
}

/* Custom pseudo-element positioning for white shirt */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.white-shirt .color-layer.pattern-one::after {
    left: 0%;
    right: -5%;
    width: 99.4%;
    height: 108%;
    top: -24.4%;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: none;
}

/* Pattern One - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .color-layer.pattern-one {
    width: 54%;
    height: 53%;
    left: 52%;
    top: 48.5%;
    transform: translate(-50%, -50%);
    mix-blend-mode: soft-light;
    opacity: 0.75;
}

/* Custom pseudo-element positioning for camo shirt */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .color-layer.pattern-one::after {
    left: -2%;
    right: -5%;
    width: 99%;
    height: 108%;
    top: -23.5%;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: none;
}

/* Pattern Two (Complex pattern with spot fixes) - DEFAULT BLACK SHIRT */
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-two {
    position: absolute;
    width: 52%;
    height: 52%;
    left: 50.2%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 2; /* Returned beneath the shirt */
    background-color: var(--main-color, #4dff00);
    display: block; /* Use block instead of flex */
    opacity: 1; /* Full opacity restored */
}

/* Add a ring to the pattern two using ::after with a radial gradient */
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-two::after {
    content: '';
    position: absolute;
    top: -14%; /* Move the ring more upward from center */
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        transparent 0,
        transparent calc(47% - 8%),
        var(--tertiary-color, #c20037) calc(47% - 8%),
        var(--tertiary-color, #c20037) calc(47% + 0%),
        transparent calc(47% + 0%),
        transparent 100%
    );
    z-index: 2.5; /* Middle layer - above base but below spot fixes */
    opacity: 1;
}

/* Remove all the individual section styles */
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-two .tertiary-left,
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-two .main-color,
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-two .tertiary-right {
    display: none;
}

/* Pattern Two - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.white-shirt .color-layer.pattern-two {
    z-index: 1; /* Put underneath the shirt */
    opacity: 1; /* Full opacity */
    width: 52.6%;
    height: 52.6%;
    left: 49.2%; /* Moved 2% to the right from 50% */
    top: 45%;
    mix-blend-mode: multiply;
}

/* Pattern Two - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .color-layer.pattern-two {
    position: absolute;
    width: 52%;
    height: 52%;
    left: 50.2%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Lower z-index to appear below the shirt */
    background-color: var(--main-color, #4dff00);
    display: block; /* Use block instead of flex */
    opacity: 1; /* Changed from 0.6 to 1 for full opacity */
}

/* Make radial gradient ring for camo shirt pattern 2 identical to the black shirt */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .color-layer.pattern-two::after {
    content: '';
    position: absolute;
    top: -14%; /* Move the ring more upward from center */
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        transparent 0,
        transparent calc(47% - 8%),
        var(--tertiary-color, #c20037) calc(47% - 8%),
        var(--tertiary-color, #c20037) calc(47% + 0%),
        transparent calc(47% + 0%),
        transparent 100%
    );
    z-index: 1; /* Lower z-index to appear below the shirt */
    opacity: 1; /* Changed from 0.7 to 1 for full opacity */
}

/* Custom spot fix rectangles for Grizzly camo pattern two */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .center-spot-fix-1 {
    position: absolute;
    width: 30%; /* Will be adjusted by user */
    height: 15%; /* Will be adjusted by user */
    left: 2%; /* Center positioned */
    top: 14%; /* Center positioned */
    background-color: var(--tertiary-color, #c20037);
    z-index: 1; /* Lower z-index to appear below the shirt */
    opacity: 1; /* Changed from 0.8 to 1 for full opacity */
    transform: rotate(30deg);
}

.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .center-spot-fix-2 {
    position: absolute;
    width: 30%; /* Will be adjusted by user */
    height: 15%; /* Will be adjusted by user */
    left: 66%; /* Center positioned */
    top: 16%; /* Positioned below the first rectangle */
    background-color: var(--tertiary-color, #c20037);
    z-index: 1; /* Lower z-index to appear below the shirt */
    opacity: 1; /* Changed from 0.8 to 1 for full opacity */
    transform: rotate(30deg);
}

/* Third rectangular spot fix for center circle */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .center-spot-fix-3 {
    position: absolute;
    width: 20%; /* Will be adjusted by user */
    height: 20%; /* Will be adjusted by user */
    left: 9%; /* Centered horizontally */
    top: 16%; /* Centered vertically */
    background-color: var(--tertiary-color, #c20037);
    z-index: 1; /* Lower z-index to appear below the shirt */
    opacity: 1;
    transform: rotate(50deg);
}

/* Pattern Three (Gradient square) - DEFAULT BLACK SHIRT */
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-three {
    position: absolute;
    width: 52%;
    height: 72%;
    left: 50.2%;
    top: 52%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    flex-direction: row;
    opacity: 1;
}

/* Left side - tertiary color with gradient */
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-three .tertiary-left {
    flex: 4;
    background-image: linear-gradient(to right, 
        var(--tertiary-color, #c20037) 0%, 
        var(--tertiary-color, #c20037) 30%, 
        var(--main-color, #4dff00) 100%);
    margin-right: -1px;
    z-index: 1;
    display: block;
}

/* Middle section - main color */
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-three .main-color {
    flex: 2;
    background-color: var(--main-color, #4dff00);
    margin-left: -1px;
    margin-right: -1px;
    z-index: 0;
    display: block;
}

/* Right side - tertiary color with gradient */
.custom-shirt-container[data-shirt-id="3"] .color-layer.pattern-three .tertiary-right {
    flex: 4;
    background-image: linear-gradient(to right, 
        var(--main-color, #4dff00) 0%, 
        var(--tertiary-color, #c20037) 70%, 
        var(--tertiary-color, #c20037) 100%);
    margin-left: -1px;
    z-index: 1;
    display: block;
}

/* Pattern Three - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.white-shirt .color-layer.pattern-three {
    left: 48.2%;   /* Moved 2% to the left from the default 50.2% */
    width: 52%;
    height: 72%;
    mix-blend-mode: multiply;
    opacity: 0.85;
}

/* Pattern Three - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .color-layer.pattern-three {
    left: 50.2%;   /* Same as default */
    width: 58%;    /* Widened from 52% to 58% */
    height: 72%;
    opacity: 1; /* Changed from 0.75 to 1 for full opacity */
}

/* ===== SPOT FIXES FOR COMPLEX PATTERNS ===== */

/* Container for spot fixes */
.custom-shirt-container .color-layer-spot-fixes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

/* Spot fix elements - tertiary color (1-8, 10, 19) */
.custom-shirt-container .spot-fix-1,
.custom-shirt-container .spot-fix-2,
.custom-shirt-container .spot-fix-3,
.custom-shirt-container .spot-fix-4,
.custom-shirt-container .spot-fix-5,
.custom-shirt-container .spot-fix-6,
.custom-shirt-container .spot-fix-7,
.custom-shirt-container .spot-fix-8,
.custom-shirt-container .spot-fix-10,
.custom-shirt-container .spot-fix-19 {
    position: absolute;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
    z-index: 3;
    opacity: 1;
}

/* Specific z-index for camo spot fixes */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt #spot-fix-1,
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt #spot-fix-2,
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt #spot-fix-19 {
    z-index: 5;
    opacity: 1; /* Changed from 0.9 to 1 for full opacity */
}

/* Spot fix elements - main color (9, 11-18, 20-22) */
.custom-shirt-container .spot-fix-9,
.custom-shirt-container .spot-fix-11,
.custom-shirt-container .spot-fix-12,
.custom-shirt-container .spot-fix-13,
.custom-shirt-container .spot-fix-14,
.custom-shirt-container .spot-fix-15,
.custom-shirt-container .spot-fix-16,
.custom-shirt-container .spot-fix-17,
.custom-shirt-container .spot-fix-18,
.custom-shirt-container .spot-fix-20,
.custom-shirt-container .spot-fix-21,
.custom-shirt-container .spot-fix-22 {
    position: absolute;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    z-index: 3;
    opacity: 1;
}

/* Spot fix 1 (formerly left) */
.custom-shirt-container #spot-fix-1 {
    width: 7%;
    height: 20%;
    left: 13%;
    top: 23%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
    z-index: 3;
}

/* Adjust spot-fix-1 for white shirt */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.white-shirt #spot-fix-1 {
    width: 7%;
    height: 20%;
    left: 13%;
    top: 23%;
    background-color: var(--tertiary-color, #c20037); 
    border-radius: 0;
    z-index: 3;
}

/* Spot fix 2 (formerly right) */
.custom-shirt-container #spot-fix-2 {
    width: 8%;
    height: 8%;
    left: 75%;
    top: 20%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
    z-index: 3;
}

/* Adjust spot-fix-2 for white shirt */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.white-shirt #spot-fix-2 {
    width: 8%;
    height: 8%;
    left: 75%;
    top: 20%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
    z-index: 3;
}

/* Spot fix 3 (new) */
.custom-shirt-container #spot-fix-3 {
    width: 30%;
    height: 14%;
    left: 34%;
    top: 58%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
}

/* Spot fix 4 */
.custom-shirt-container #spot-fix-4 {
    width: 8%;
    height: 8%;
    left: 14.5%;
    top: 28%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
    transform: rotate(-30deg);
}

/* Spot fix 5 */
.custom-shirt-container #spot-fix-5 {
    width: 7%;
    height: 7%;
    left: 70%;
    top: 48.5%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
}

/* Spot fix 6 */
.custom-shirt-container #spot-fix-6 {
    width: 6%;
    height: 6%;
    left: 64%;
    top: 55%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
}

/* Spot fix 7 */
.custom-shirt-container #spot-fix-7 {
    width: 5%;
    height: 10%;
    left: 76.1%;
    top: 39%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
    transform: rotate(11deg);
}

/* Spot fix 8 */
.custom-shirt-container #spot-fix-8 {
    width: 7%;
    height: 7%;
    left: 76.1%;
    top: 30.5%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
    transform: rotate(13deg);
}

/* Spot fix 9 - triangle up */
.custom-shirt-container #spot-fix-9 {
    width: 8%;
    height: 8%;
    left: 69.437%;
    top: 58.5%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(-15deg);
}

/* Spot fix 10 - triangle down */
.custom-shirt-container #spot-fix-10 {
    width: 8%;
    height: 8%;
    left: 61.57%;
    top: 59.82%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    transform: rotate(28deg);
}

/* Spot fix 11 - triangle left */
.custom-shirt-container #spot-fix-11 {
    width: 8%; 
    height: 8%;
    left: 73%;
    top: 53.5%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
    transform: rotate(-20deg);
}

/* Spot fix 12 - triangle right */
.custom-shirt-container #spot-fix-12 {
    width: 8%;
    height: 8%;
    left: 73.2%;
    top: 58%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}

/* Spot fix 13 - triangle up-right */
.custom-shirt-container #spot-fix-13 {
    width: 8%;
    height: 8%;
    left: 67.17%;
    top: 62.4%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
    transform: rotate(-45deg);
}

/* Spot fix 14 - triangle up-left */
.custom-shirt-container #spot-fix-14 {
    width: 8%;
    height: 8%;
    left: 70.75%;
    top: 60.21%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
    transform: rotate(90deg);
}

/* Spot fix 15 - diamond */
.custom-shirt-container #spot-fix-15 {
    width: 8%;
    height: 8%;
    left: 72%;
    top: 56.3%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Spot fix 16 - equilateral triangle */
.custom-shirt-container #spot-fix-16 {
    width: 8%;
    height: 8%;
    left: 65.5%;
    top: 45.5%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    clip-path: polygon(0% 87%, 50% 0%, 100% 87%);
    transform: rotate(20deg);
}

/* Spot fix 17 - right pointing triangle */
.custom-shirt-container #spot-fix-17 {
    width: 10%;
    height: 10%;
    left: 20%;
    top: 40%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
    transform: rotate(32deg);
}

/* Spot fix 18 - upside down triangle */
.custom-shirt-container #spot-fix-18 {
    width: 12%;
    height: 12%;
    left: 20%;
    top: 53%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    transform: rotate(12deg);
}

/* Spot fix 19 - middle rectangle at the top */
.custom-shirt-container #spot-fix-19 {
    width: 60%;
    height: 22%;
    left: 20%;
    top: 2%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
    z-index: 3;
}

/* Adjust spot-fix-19 for white shirt */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.white-shirt #spot-fix-19 {
    width: 60%;
    height: 22%;
    left: 20%;
    top: 2%;
    background-color: var(--tertiary-color, #c20037);
    border-radius: 0;
    z-index: 3;
}

/* Spot fix 20 - circle */
.custom-shirt-container #spot-fix-20 {
    width: 15%;
    height: 15%;
    left: 20.9%;
    top: 32.1%;
    background-color: var(--main-color, #4dff00);
    border-radius: 50%;
}

/* Spot fix 21 - square */
.custom-shirt-container #spot-fix-21 {
    width: 12%;
    height: 12%;
    left: 18%;
    top: 46%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
}

/* Spot fix 22 - triangle */
.custom-shirt-container #spot-fix-22 {
    width: 14%;
    height: 14%;
    left: 15.5%;
    top: 40%;
    background-color: var(--main-color, #4dff00);
    border-radius: 0;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(-12deg);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Adjustments for tablet view (801px-1100px) */
@media screen and (max-width: 1100px) and (min-width: 801px) {
    /* Harbinger tablet adjustments */
    .custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-one,
    .custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-two {
        width: 51%;
        height: 70%;
    }
    
    .custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-three {
        width: 51%;
        height: 56%; /* Adjusted for the new height */
    }
    
    /* White shirt adjustments for tablet */
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-one,
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-two {
        width: 50%;
        height: 68%;
    }
    
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-three {
        width: 50%;
        height: 55%; /* Adjusted for the new height */
    }
    
    /* Camo shirt adjustments for tablet */
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-one {
        top: 52%;
        opacity: 1;
        z-index: 2;
    }
    
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-two {
        width: 54%;
        top: 53%;
        opacity: 1;
        z-index: 2;
    }
    
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-three {
        width: 51%;
        height: 56%; /* Adjusted for the new height */
        top: 47%; /* Adjusted positioning */
    }
    
    /* Grizzly camo tablet adjustments */
    .custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .color-layer.pattern-two {
        width: 53%;
        height: 54%;
        left: 50.5%;
        top: 46%;
    }
}

/* Adjustments for mobile view (≤800px) */
@media screen and (max-width: 800px) {
    /* Harbinger mobile adjustments */
    .custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-one,
    .custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-two {
        width: 54%;
        height: 70%;
        top: 52%;
    }
    
    .custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-one::after {
        top: 15%;
    }
    
    .custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-one::before {
        top: 56%;
    }
    
    .custom-shirt-container[data-shirt-id="1"] .color-layer.pattern-three {
        width: 54%;
        height: 56%; /* Adjusted for the new height */
        top: 45%; /* Adjusted positioning */
    }
    
    /* White shirt mobile adjustments */
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-one,
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-two {
        width: 53%;
        height: 68%;
        top: 52%;
    }
    
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.white-shirt .color-layer.pattern-three {
        width: 53%;
        height: 55%; /* Adjusted for the new height */
        top: 45%; /* Adjusted positioning */
    }
    
    /* Camo shirt mobile adjustments */
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-one {
        top: 53%;
        width: 53%;
        opacity: 1;
        z-index: 2;
    }
    
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-one::after {
        top: 19%; /* Match the updated ellipse position */
    }
    
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-two {
        width: 56%;
        top: 55%;
        opacity: 1;
        z-index: 2;
    }
    
    .custom-shirt-container[data-shirt-id="1"] .shirt-container.camo-shirt .color-layer.pattern-three {
        width: 53%;
        height: 56%; /* Adjusted for the new height */
        top: 49%; /* Adjusted positioning */
    }
    
    /* Grizzly pattern spot fix adjustments */
    .custom-shirt-container .spot-fix-1,
    .custom-shirt-container .spot-fix-2,
    .custom-shirt-container .spot-fix-3,
    .custom-shirt-container .spot-fix-4,
    .custom-shirt-container .spot-fix-5,
    .custom-shirt-container .spot-fix-6,
    .custom-shirt-container .spot-fix-7,
    .custom-shirt-container .spot-fix-8,
    .custom-shirt-container .spot-fix-9,
    .custom-shirt-container .spot-fix-10,
    .custom-shirt-container .spot-fix-11,
    .custom-shirt-container .spot-fix-12,
    .custom-shirt-container .spot-fix-13,
    .custom-shirt-container .spot-fix-14,
    .custom-shirt-container .spot-fix-15,
    .custom-shirt-container .spot-fix-16,
    .custom-shirt-container .spot-fix-17,
    .custom-shirt-container .spot-fix-18,
    .custom-shirt-container .spot-fix-19,
    .custom-shirt-container .spot-fix-20,
    .custom-shirt-container .spot-fix-21,
    .custom-shirt-container .spot-fix-22 {
        transform: scale(0.9);
    }
    
    /* Grizzly camo mobile adjustments */
    .custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .color-layer.pattern-two {
        width: 54%;
        height: 55%;
        left: 50.4%;
        top: 46.5%;
    }
}

/* ===== GENERAL SHIRT COLOR VARIATIONS ===== */

/* White shirt adjustments */
.custom-shirt-container .shirt-container.white-shirt .color-layer {
    mix-blend-mode: multiply;
    opacity: 0.8;
}

/* Camo shirt adjustments - FULL OPACITY */
.custom-shirt-container .shirt-container.camo-shirt .color-layer {
    mix-blend-mode: normal;
    opacity: 1;
}

/* ===== WARDEN-SPECIFIC PATTERNS (SHIRT ID 2) ===== */

/* Pattern One (Vertical gradient with radial circle) - DEFAULT BLACK SHIRT */
.custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-one {
    position: absolute;
    width: 54%;
    height: 62%;
    left: 50.2%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    overflow: hidden;
}

/* Background gradient for pattern one */
.custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-one::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
    z-index: 0;
}

/* Radial circle for pattern one */
.custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-one .radial-circle {
    position: absolute;
    width: 50%;
    height: 45%;
    aspect-ratio: 1;
    border-radius: 50%;
    top: 5%;
    left: 5%;
    background-color: rgba(0,0,0,0.1);
    box-shadow: inset 0 0 0 1000px rgba(255,255,255,0.05);
    background-image: conic-gradient(
        var(--main-color, #4dff00) 0deg,
        var(--main-color, #4dff00) 9deg,
        var(--tertiary-color, #c20037) 22.5deg,
        var(--tertiary-color, #c20037) 36deg,
        var(--main-color, #4dff00) 45deg,
        var(--main-color, #4dff00) 54deg,
        var(--tertiary-color, #c20037) 67.5deg,
        var(--tertiary-color, #c20037) 81deg,
        var(--main-color, #4dff00) 90deg,
        var(--main-color, #4dff00) 99deg,
        var(--tertiary-color, #c20037) 112.5deg,
        var(--tertiary-color, #c20037) 126deg,
        var(--main-color, #4dff00) 135deg,
        var(--main-color, #4dff00) 144deg,
        var(--tertiary-color, #c20037) 157.5deg,
        var(--tertiary-color, #c20037) 171deg,
        var(--main-color, #4dff00) 180deg,
        var(--main-color, #4dff00) 189deg,
        var(--tertiary-color, #c20037) 202.5deg,
        var(--tertiary-color, #c20037) 216deg,
        var(--main-color, #4dff00) 225deg,
        var(--main-color, #4dff00) 234deg,
        var(--tertiary-color, #c20037) 247.5deg,
        var(--tertiary-color, #c20037) 261deg,
        var(--main-color, #4dff00) 270deg,
        var(--main-color, #4dff00) 279deg,
        var(--tertiary-color, #c20037) 292.5deg,
        var(--tertiary-color, #c20037) 306deg,
        var(--main-color, #4dff00) 315deg,
        var(--main-color, #4dff00) 324deg,
        var(--tertiary-color, #c20037) 337.5deg,
        var(--tertiary-color, #c20037) 351deg,
        var(--main-color, #4dff00) 360deg
    );
    mix-blend-mode: normal;
    opacity: 1;
    z-index: 2;
}

/* Pattern Two (Circle with ring) - DEFAULT BLACK SHIRT */
.custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-two {
    position: absolute;
    width: 54%;
    height: 62%;
    left: 50.2%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(45deg, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
}

/* Circle Ring for pattern two */
.custom-shirt-container[data-shirt-id="2"] .circle-ring {
    position: absolute;
    width: 51%;
    height: 44%;
    top: 5.5%;
    left: 3.5%;
    border-radius: 50%;
    z-index: 2;
    background: linear-gradient(225deg, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
}

/* Remove inner circle cutout - not in focused page */
.custom-shirt-container[data-shirt-id="2"] .circle-ring::before {
    display: none;
}

/* Pattern Three (Horizontal gradient) - DEFAULT BLACK SHIRT */
.custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-three {
    position: absolute;
    width: 54%;
    height: 62%;
    left: 50.2%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(to right, 
        var(--tertiary-color, #c20037) 0%, 
        var(--tertiary-color, #c20037) 20%, 
        var(--main-color, #4dff00) 80%, 
        var(--main-color, #4dff00) 100%);
}

/* Create a circle for pattern-three */
.custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-three .circle-ring {
    display: block;
    position: absolute;
    width: 51%;
    height: 44%;
    top: 5.5%;
    left: 3.5%;
    border-radius: 50%;
    z-index: 2;
    background: linear-gradient(to right, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
}

/* ===== WHITE SHIRT CUSTOMIZATIONS FOR WARDEN ===== */

/* Pattern One (Vertical gradient with radial circle) - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-one {
    position: absolute;
    width: 54%;
    height: 62%;
    left: 49%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    overflow: hidden;
    mix-blend-mode: multiply;
    opacity: 0.8;
}

/* Background gradient for pattern one - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-one::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
    z-index: 0;
}

/* Radial circle for pattern one - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .radial-circle {
    position: absolute;
    width: 50%;
    height: 45%;
    aspect-ratio: 1;
    border-radius: 50%;
    top: 5%;
    left: 5%;
    background-color: rgba(0,0,0,0.1);
    box-shadow: inset 0 0 0 1000px rgba(255,255,255,0.05);
    background-image: conic-gradient(
        var(--main-color, #4dff00) 0deg,
        var(--main-color, #4dff00) 9deg,
        var(--tertiary-color, #c20037) 22.5deg,
        var(--tertiary-color, #c20037) 36deg,
        var(--main-color, #4dff00) 45deg,
        var(--main-color, #4dff00) 54deg,
        var(--tertiary-color, #c20037) 67.5deg,
        var(--tertiary-color, #c20037) 81deg,
        var(--main-color, #4dff00) 90deg,
        var(--main-color, #4dff00) 99deg,
        var(--tertiary-color, #c20037) 112.5deg,
        var(--tertiary-color, #c20037) 126deg,
        var(--main-color, #4dff00) 135deg,
        var(--main-color, #4dff00) 144deg,
        var(--tertiary-color, #c20037) 157.5deg,
        var(--tertiary-color, #c20037) 171deg,
        var(--main-color, #4dff00) 180deg,
        var(--main-color, #4dff00) 189deg,
        var(--tertiary-color, #c20037) 202.5deg,
        var(--tertiary-color, #c20037) 216deg,
        var(--main-color, #4dff00) 225deg,
        var(--main-color, #4dff00) 234deg,
        var(--tertiary-color, #c20037) 247.5deg,
        var(--tertiary-color, #c20037) 261deg,
        var(--main-color, #4dff00) 270deg,
        var(--main-color, #4dff00) 279deg,
        var(--tertiary-color, #c20037) 292.5deg,
        var(--tertiary-color, #c20037) 306deg,
        var(--main-color, #4dff00) 315deg,
        var(--main-color, #4dff00) 324deg,
        var(--tertiary-color, #c20037) 337.5deg,
        var(--tertiary-color, #c20037) 351deg,
        var(--main-color, #4dff00) 360deg
    );
    mix-blend-mode: normal;
    opacity: 1;
    z-index: 2;
}

/* Pattern Two (Circle with ring) - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-two {
    position: absolute;
    width: 50%;
    height: 60%;
    left: 49%;
    top: 48%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    overflow: hidden;
    mix-blend-mode: multiply;
    opacity: 0.8;
    background: linear-gradient(45deg, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
}

/* Circle Ring for pattern two - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .circle-ring {
    position: absolute;
    width: 53.5%;
    height: 45%;
    top: 1.8%;
    left: 3.8%;
    border-radius: 50%;
    z-index: 2;
    background: linear-gradient(225deg, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
}

/* Pattern Three (Horizontal gradient) - WHITE SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-three {
    position: absolute;
    width: 50%;
    height: 60%;
    left: 49%;
    top: 48%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    overflow: hidden;
    mix-blend-mode: multiply;
    opacity: 0.8;
    background: linear-gradient(to right, 
        var(--tertiary-color, #c20037) 0%, 
        var(--tertiary-color, #c20037) 20%, 
        var(--main-color, #4dff00) 80%, 
        var(--main-color, #4dff00) 100%);
}

/* White shirt circle adjustment for pattern-three */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-three .circle-ring {
    position: absolute;
    width: 53.5%;
    height: 45%;
    top: 1.8%;
    left: 3.8%;
    border-radius: 50%;
    z-index: 2;
    background: linear-gradient(to right, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
}

/* ===== CAMO SHIRT CUSTOMIZATIONS FOR WARDEN ===== */

/* Pattern One (Vertical gradient with radial circle) - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-one {
    position: absolute;
    width: 58%;
    height: 62%;
    left: 50.2%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    overflow: hidden;
    mix-blend-mode: soft-light;
    opacity: 0.75;
}

/* Background gradient for pattern one - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-one::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
    z-index: 0;
}

/* Radial circle for pattern one - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .radial-circle {
    position: absolute;
    width: 50%;
    height: 45%;
    aspect-ratio: 1;
    border-radius: 50%;
    top: 5%;
    left: 5%;
    background-color: rgba(0,0,0,0.1);
    box-shadow: inset 0 0 0 1000px rgba(255,255,255,0.05);
    background-image: conic-gradient(
        var(--main-color, #4dff00) 0deg,
        var(--main-color, #4dff00) 9deg,
        var(--tertiary-color, #c20037) 22.5deg,
        var(--tertiary-color, #c20037) 36deg,
        var(--main-color, #4dff00) 45deg,
        var(--main-color, #4dff00) 54deg,
        var(--tertiary-color, #c20037) 67.5deg,
        var(--tertiary-color, #c20037) 81deg,
        var(--main-color, #4dff00) 90deg,
        var(--main-color, #4dff00) 99deg,
        var(--tertiary-color, #c20037) 112.5deg,
        var(--tertiary-color, #c20037) 126deg,
        var(--main-color, #4dff00) 135deg,
        var(--main-color, #4dff00) 144deg,
        var(--tertiary-color, #c20037) 157.5deg,
        var(--tertiary-color, #c20037) 171deg,
        var(--main-color, #4dff00) 180deg,
        var(--main-color, #4dff00) 189deg,
        var(--tertiary-color, #c20037) 202.5deg,
        var(--tertiary-color, #c20037) 216deg,
        var(--main-color, #4dff00) 225deg,
        var(--main-color, #4dff00) 234deg,
        var(--tertiary-color, #c20037) 247.5deg,
        var(--tertiary-color, #c20037) 261deg,
        var(--main-color, #4dff00) 270deg,
        var(--main-color, #4dff00) 279deg,
        var(--tertiary-color, #c20037) 292.5deg,
        var(--tertiary-color, #c20037) 306deg,
        var(--main-color, #4dff00) 315deg,
        var(--main-color, #4dff00) 324deg,
        var(--tertiary-color, #c20037) 337.5deg,
        var(--tertiary-color, #c20037) 351deg,
        var(--main-color, #4dff00) 360deg
    );
    mix-blend-mode: normal;
    opacity: 1;
    z-index: 2;
}

/* Pattern Two (Circle with ring) - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-two {
    position: absolute;
    width: 54%;
    height: 62%;
    left: 50.5%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    overflow: hidden;
    mix-blend-mode: soft-light;
    opacity: 0.75;
    background: linear-gradient(45deg, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
}

/* Circle Ring for pattern two - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .circle-ring {
    position: absolute;
    width: 53%;
    height: 49%;
    top: 1%;
    left: 3%;
    border-radius: 50%;
    z-index: 2;
    background: linear-gradient(225deg, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
}

/* Pattern Three (Horizontal gradient) - CAMO SHIRT */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-three {
    position: absolute;
    width: 54%;
    height: 62%;
    left: 50.5%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 1;
    overflow: hidden;
    opacity: 0.75;
    background: linear-gradient(to right, 
        var(--tertiary-color, #c20037) 0%, 
        var(--tertiary-color, #c20037) 20%, 
        var(--main-color, #4dff00) 80%, 
        var(--main-color, #4dff00) 100%);
}

/* Camo shirt circle adjustment for pattern-three */
.custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-three .circle-ring {
    position: absolute;
    width: 53%;
    height: 49%;
    top: 1%;
    left: 3%;
    border-radius: 50%;
    z-index: 2;
    background: linear-gradient(to right, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
}

/* ===== RESPONSIVE ADJUSTMENTS FOR WARDEN ===== */

/* Adjustments for tablet view (801px-1099px) */
@media screen and (max-width: 1100px) and (min-width: 801px) {
    /* Warden tablet adjustments */
    .custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-one,
    .custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-two,
    .custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-three {
        width: 52%;
        height: 60%;
    }
    
    /* White shirt tablet adjustments */
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-one,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-two,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-three {
        width: 52%;
        height: 60%;
        left: 48.5%;
    }
    
    /* Camo shirt tablet adjustments */
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-one,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-two,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-three {
        width: 56%;
        height: 60%;
    }
}

/* Adjustments for mobile view (≤800px) */
@media screen and (max-width: 800px) {
    /* Warden mobile adjustments */
    .custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-one,
    .custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-two,
    .custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-three {
        width: 54%;
        height: 60%;
    }
    
    /* White shirt mobile adjustments */
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-one,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-two,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .color-layer.pattern-three {
        width: 54%;
        height: 60%;
        left: 48.5%;
    }
    
    /* Camo shirt mobile adjustments */
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-one,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-two,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .color-layer.pattern-three {
        width: 58%;
        height: 60%;
    }
    
    /* Radial circle adjustments */
    .custom-shirt-container[data-shirt-id="2"] .radial-circle,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .radial-circle,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .radial-circle {
        width: 48%;
        height: 43%;
    }
    
    /* Circle ring adjustments */
    .custom-shirt-container[data-shirt-id="2"] .circle-ring,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .circle-ring,
    .custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .circle-ring {
        width: 88%;
        height: 88%;
    }
} 

/* Focused shirt image - positioned above the color layers for Grizzly camo */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .focused-shirt {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 3; /* Higher z-index to appear above all color layers */
}

/* Spot fix 20 - circle */
.custom-shirt-container #spot-fix-20 {
    width: 15%;
    height: 15%;
    left: 20.9%;
    top: 32.1%;
    background-color: var(--main-color, #4dff00);
    border-radius: 50%;
}

/* Specific rule for the main color circle spot fix for Grizzly camo pattern two */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt #spot-fix-20 {
    z-index: 6;
    opacity: 1; /* Ensure full opacity */
    width: 25%;
    height: 25%;
    left: 35%;
    top: 35%;
}

/* Make sure the circle ring for Warden appears correctly for pattern two */
.custom-shirt-container[data-shirt-id="2"] .circle-ring,
.custom-shirt-container[data-shirt-id="2"] .shirt-container.white-shirt .circle-ring,
.custom-shirt-container[data-shirt-id="2"] .shirt-container.camo-shirt .circle-ring {
    z-index: 2;
    display: block !important;
}

/* Ensure spot-fix-20 doesn't appear on Warden shirts */
.custom-shirt-container[data-shirt-id="2"] #spot-fix-20 {
    display: none !important;
}

/* Make sure the circle ring for Warden has the correct position and styling */
.custom-shirt-container[data-shirt-id="2"] .color-layer.pattern-two .circle-ring {
    position: absolute;
    width: 51%;
    height: 44%;
    top: 5.5%;
    left: 3.5%;
    border-radius: 50%;
    z-index: 2;
    display: block !important;
    background: linear-gradient(225deg, 
        var(--main-color, #4dff00) 0%, 
        var(--main-color, #4dff00) 20%, 
        var(--tertiary-color, #c20037) 80%, 
        var(--tertiary-color, #c20037) 100%);
}

/* Simple rectangular spot fixes for Grizzly black pattern two */
.custom-shirt-container[data-shirt-id="3"] .black-spot-fix-1 {
    position: absolute;
    width: 30%;
    height: 15%;
    left: -3%; 
    top: 21%;
    background-color: var(--tertiary-color, #c20037);
    z-index: 6;
    opacity: 1;
    transform: rotate(-12deg);
}

.custom-shirt-container[data-shirt-id="3"] .black-spot-fix-2 {
    position: absolute;
    width: 30%;
    height: 15%;
    left: 72%;
    top: 21%;
    background-color: var(--tertiary-color, #c20037);
    z-index: 6;
    opacity: 1;
    transform: rotate(35deg);
}

/* Spot fixes for Grizzly white shirt pattern two */
.custom-shirt-container[data-shirt-id="3"] .shirt-container.white-shirt .black-spot-fix-1 {
    position: absolute;
    width: 30%;
    height: 15%;
    left: -3%;
    top: 21%;
    background-color: var(--tertiary-color, #c20037);
    z-index: 6;
    opacity: 1;
    transform: rotate(-12deg);
}

.custom-shirt-container[data-shirt-id="3"] .shirt-container.white-shirt .black-spot-fix-2 {
    position: absolute;
    width: 30%;
    height: 15%;
    left: 72%;
    top: 21%;
    background-color: var(--tertiary-color, #c20037);
    z-index: 6;
    opacity: 1;
    transform: rotate(35deg);
}

/* ===== DOMINION-SPECIFIC PATTERNS (SHIRT ID 4) ===== */

/* Pattern One - Vertical with arch shape */
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-one {
    position: absolute;
    width: 52%;
    height: 72%;
    z-index: 3;
    left: 50.2%;
    top: 52%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
}

.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-one .tertiary-left {
    display: block;
    flex: 2.3;
    background-image: linear-gradient(to bottom, 
        var(--tertiary-color) 0%, 
        var(--tertiary-color) 30%, 
        var(--main-color) 100%);
    margin-bottom: -1px;
    z-index: 1;
}

.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-one .main-color {
    display: block;
    flex: 4.7;
    background-color: var(--main-color);
    margin-top: -1px;
    margin-bottom: -1px;
    z-index: 0;
}

/* Replace standard tertiary-right with arched version for pattern 1 */
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-one .tertiary-right {
    display: block;
    position: absolute;
    bottom: -5%;
    left: 0;
    height: 45%;
    width: 100%;
    background: linear-gradient(to bottom,
        transparent 0%, 
        var(--tertiary-color) 70%,
        var(--tertiary-color) 100%
    );
    z-index: 1;
    overflow: visible;
}

/* Create the arch shape */
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-one .tertiary-right::before {
    content: '';
    position: absolute;
    top: -90%;
    width: 120%;
    height: 160%;
    background: radial-gradient(
        ellipse at center bottom,
        var(--tertiary-color) 0%,
        var(--tertiary-color) 25%,
        transparent 60%
    );
    border-radius: 40% 40% 0 0 / 90% 90% 0 0;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
}

/* Pattern 2 - Horizontal */
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-two {
    position: absolute;
    width: 52%;
    height: 72%;
    left: 50.2%;
    top: 52%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: row;
}

.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-two .tertiary-left {
    display: block;
    flex: 3;
    background-image: linear-gradient(to right, 
        var(--tertiary-color) 0%, 
        var(--tertiary-color) 30%, 
        var(--main-color) 100%);
    margin-right: -1px;
    z-index: 1;
}

.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-two .main-color {
    display: block;
    flex: 4;
    background-color: var(--main-color);
    margin-left: -1px;
    margin-right: -1px;
    z-index: 0;
}

.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-two .tertiary-right {
    display: block;
    flex: 3.2;
    background-image: linear-gradient(to right, 
        var(--main-color) 0%, 
        var(--tertiary-color) 70%, 
        var(--tertiary-color) 100%);
    margin-left: -1px;
    z-index: 1;
}

/* Pattern 3 - Four tertiary color stripes */
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-three {
    position: absolute;
    width: 52%;
    height: 72%;
    left: 50.2%;
    top: 52%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background-color: var(--main-color);
}

/* Hide original elements in pattern 3 */
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-three .tertiary-left,
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-three .main-color,
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-three .tertiary-right {
    display: none;
}

/* Container for stripes */
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-three .stripe-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Style for the 4 tertiary color stripes with transparency fade */
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-three .stripe {
    position: absolute;
    top: 0;
    height: 100%;
    width: 20%;
    transform: translateX(-50%); /* Center exactly at position */
    display: block;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,  /* Transparent at edges */
        var(--tertiary-color) 50%, 
        rgba(0, 0, 0, 0) 100%  /* Transparent at edges */
    );
    mix-blend-mode: screen; /* Blend properly with background */
}

/* Position each of the 4 stripes */
.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-three .stripe-1 {
    left: 15%;
}

.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-three .stripe-2 {
    left: 38%;
}

.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-three .stripe-3 {
    left: 62%;
}

.custom-shirt-container[data-shirt-id="4"] .color-layer.pattern-three .stripe-4 {
    left: 85%;
}

/* White shirt adjustments */
.custom-shirt-container[data-shirt-id="4"] .shirt-container.white-shirt .color-layer {
    width: 50%;
    left: 50%;
    z-index: 1; /* Put behind the shirt image */
    mix-blend-mode: multiply;
    opacity: 0.8;
}

/* White shirt adjustments for pattern 1 */
.custom-shirt-container[data-shirt-id="4"] .shirt-container.white-shirt .color-layer.pattern-one .tertiary-right {
    flex: 3.2;  /* Increase from 3 to 3.2 to extend more to the left */
}

.custom-shirt-container[data-shirt-id="4"] .shirt-container.white-shirt .color-layer.pattern-one .main-color {
    flex: 3.8;  /* Decrease from 4 to 3.8 to accommodate tertiary-right expansion */
}

/* Camo shirt adjustments */
.custom-shirt-container[data-shirt-id="4"] .shirt-container.camo-shirt .color-layer {
    z-index: 1; /* Put behind the shirt image */
    opacity: 1; /* Full opacity */
    width: 54%; /* Slightly wider for camo shirt */
    left: 50%; /* Adjusted position */
    height: 65%;
}

.custom-shirt-container[data-shirt-id="4"] .shirt-container.camo-shirt .color-layer.pattern-one {
    z-index: 1;
    opacity: 1;
    top: 52.5%;
}

.custom-shirt-container[data-shirt-id="4"] .shirt-container.camo-shirt .color-layer.pattern-two {
    z-index: 1;
    opacity: 1;
}

.custom-shirt-container[data-shirt-id="4"] .shirt-container.camo-shirt .color-layer.pattern-three {
    z-index: 1;
    opacity: 1;
    top: 53%;
}

/* Media Queries for Dominion Shirt Patterns */
@media screen and (max-width: 1100px) and (min-width: 801px) {
    .custom-shirt-container[data-shirt-id="4"] .color-layer {
        width: 49.5%;
    }
    
    .custom-shirt-container[data-shirt-id="4"] .shirt-container.camo-shirt .color-layer {
        width: 52%;
    }
}

@media screen and (max-width: 800px) {
    .custom-shirt-container[data-shirt-id="4"] .color-layer {
        width: 49%;
    }
    
    .custom-shirt-container[data-shirt-id="4"] .shirt-container.camo-shirt .color-layer {
        width: 53%;
    }
}

/* ===== WIDE SCREEN ADJUSTMENTS FOR GRIZZLY CAMO ===== */
@media screen and (min-width: 1101px) {
    /* Apply tablet transformations to wide screen view */
    .custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .color-layer.pattern-two {
        width: 53% !important;
        height: 54% !important;
        left: 50.5% !important;
        top: 46% !important;
        opacity: 1 !important;
        z-index: 2 !important;
    }
    
    /* Ensure center spot fixes retain their transforms */
    .custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .center-spot-fix-1,
    .custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .center-spot-fix-2,
    .custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .center-spot-fix-3 {
        transform: rotate(30deg) !important;
        opacity: 1 !important;
        z-index: 2 !important;
    }
    
    /* Specific rotation for center-spot-fix-3 */
    .custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .center-spot-fix-3 {
        transform: rotate(50deg) !important;
    }
}

/* Tablet layout adjustments - ensure consistency with desktop */
@media screen and (max-width: 1100px) and (min-width: 801px) {
    /* Grizzly camo tablet adjustments */
    .custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .color-layer.pattern-two {
        width: 53%;
        height: 54%;
        left: 50.5%;
        top: 46%;
    }
}

/* Adjustments for mobile view (≤800px) */
@media screen and (max-width: 800px) {
    /* Grizzly camo mobile adjustments */
    .custom-shirt-container[data-shirt-id="3"] .shirt-container.camo-shirt .color-layer.pattern-two {
        width: 54%;
        height: 55%;
        left: 50.4%;
        top: 46.5%;
    }
}