/* Authentic CSS Battery Overlays */
.css-battery {
    position: relative;
    width: 120%;
    margin-left: -10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.css-battery img.battery-base {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    /* Optional: darken the generic base slightly to make label pop */
    filter: contrast(0.9);
}

.css-battery .battery-label {
    position: absolute;
    top: 40%;
    left: 19%;
    width: 62%;
    height: 31%;
    z-index: 2;
    overflow: hidden;
    transform: perspective(600px) rotateY(26deg) rotateX(4deg) rotateZ(-2deg);
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}

/* Glass shine effect sweeping across the label */
.css-battery .battery-label::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg) translateY(-100%);
    transition: transform 0.5s ease-in-out;
    z-index: 10;
    pointer-events: none;
}

.global-brand-card:hover .css-battery .battery-label::before,
.product-card:hover .css-battery .battery-label::before {
    transform: rotate(30deg) translateY(100%);
}

/* =========================================
   AUTHENTIC BRAND DESIGNS
   ========================================= */

/* ROCKET Label */
.label-rocket {
    background: #111;
    border: 1px solid #333;
}
.label-rocket .b-title {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 1px;
    margin-bottom: 2px;
    position: relative;
    font-family: 'Arial Black', sans-serif;
}
.label-rocket .b-title::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: -5%;
    width: 110%;
    height: 4px;
    background: #e3000f;
    transform: skewX(-20deg);
}
.label-rocket .b-sub {
    color: #aaa;
    font-size: 0.6rem;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.label-rocket .b-top-left {
    position: absolute;
    top: 5px;
    left: 5px;
    color: #fff;
    font-size: 0.5rem;
    font-weight: bold;
}

/* GLOBAL Label */
.label-global {
    background: linear-gradient(135deg, #002244, #00509e);
    border: 1px solid #66b2ff;
}
.label-global .b-title {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: 'Arial', sans-serif;
}
.label-global .b-sub {
    color: #ffd700;
    font-size: 0.65rem;
    font-weight: 700;
    margin-top: 2px;
}

/* MAXTORM Label */
.label-maxtorm {
    background: #900000;
    background: linear-gradient(to bottom, #b30000, #660000);
    border: 1px solid #ff4d4d;
}
.label-maxtorm .b-title {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px #000;
    letter-spacing: 1px;
}
.label-maxtorm .b-sub {
    color: #fff;
    font-size: 0.6rem;
    background: #000;
    padding: 2px 5px;
    border-radius: 2px;
    margin-top: 4px;
}

/* SUPREME Label */
.label-supreme {
    background: linear-gradient(to right, #111, #333, #111);
    border: 2px solid #daa520;
}
.label-supreme .b-title {
    color: #daa520;
    font-size: 1.5rem;
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.label-supreme .b-sub {
    color: #fff;
    font-size: 0.6rem;
    margin-top: 2px;
    letter-spacing: 3px;
}

/* COLOSSUS Label */
.label-colossus {
    background: #1a1a1a;
    border-top: 4px solid #e6b800;
    border-bottom: 4px solid #e6b800;
}
.label-colossus .b-title {
    color: #e6b800;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    font-family: 'Impact', serif;
}
.label-colossus .b-sub {
    color: #ccc;
    font-size: 0.55rem;
    letter-spacing: 1px;
}

/* SENTRIC Label */
.label-sentric {
    background: #020617;
    background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
    border: 1px solid #00d2ff;
}
.label-sentric .b-title {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
}
.label-sentric .b-title i {
    color: #00d2ff;
}
.label-sentric .b-sub {
    color: #00d2ff;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 2px;
}


.css-battery .battery-label img { width: 100%; height: 100%; object-fit: fill; display: block; }