#fw-section-header {
--color-primary: #03235d;
--color-primary-rgb: 3, 35, 93;
--color-background: #16464a;
--color-background-rgb: 22, 70, 74;
--color-on-background: #D8D7D1;
--color-on-background-rgb: 216, 215, 209;
--color-on-primary: #161616;
--color-on-primary-rgb: 22, 22, 22;
--color-product-image-background: #D8D7D1;
--color-background-brightness: 56;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #03235d;
--primary-btn-text: #161616;
--primary-btn-border-color: #D8D7D1;
--secondary-btn-bg: transparent;
--secondary-btn-text: #D8D7D1;
--secondary-btn-border-color: #D8D7D1;
/* ==================================================
   THE ALPHA ACCORD
   Dark Bayou + Electric Teal/Blue Store Theme
   ================================================== */


/* ---------- GLOBAL ---------- */

body {
    background-color: #05090c;
    color: #f4f7f8;
}


/* ---------- HEADINGS ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 1px;
}

h1,
h2 {
    text-shadow:
        0 0 8px rgba(0, 229, 229, 0.35),
        0 0 16px rgba(0, 128, 255, 0.20);
}


/* ---------- NORMAL TEXT ---------- */

p,
span {
    color: #d5dde1;
}


/* ---------- LINKS ---------- */

a {
    color: #00e5e5;
    transition: color 0.2s ease;
}

a:hover {
    color: #4db8ff;
}


/* ---------- HEADER ---------- */

header {
    background-color: #070c10;
    border-bottom: 1px solid rgba(0, 229, 229, 0.30);
}


/* ---------- NAVIGATION ---------- */

nav a {
    color: #f4f7f8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

nav a:hover {
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.50);
}


/* ---------- BUTTONS ---------- */

button,
.button,
.btn,
input[type="submit"] {
    background: linear-gradient(
        135deg,
        #007c83,
        #009ca6,
        #167bd8
    );

    color: #ffffff;

    border: 1px solid #00cfd6;
    border-radius: 6px;

    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;

    box-shadow:
        0 0 8px rgba(0, 229, 229, 0.25);

    transition: all 0.2s ease;
}


/* ---------- BUTTON HOVER ---------- */

button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover {
    background: linear-gradient(
        135deg,
        #00aeb5,
        #00d2d2,
        #168cff
    );

    border-color: #42ffff;

    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.50),
        0 0 20px rgba(22, 140, 255, 0.25);
}


/* ---------- PRODUCT CARDS ---------- */

.product,
.product-card,
.product-item,
.card {
    background-color: #0b1217;

    border: 1px solid rgba(0, 229, 229, 0.22);
    border-radius: 8px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.40);

    transition: all 0.25s ease;
}


/* ---------- PRODUCT CARD HOVER ---------- */

.product:hover,
.product-card:hover,
.product-item:hover,
.card:hover {
    border-color: rgba(0, 229, 229, 0.65);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.50),
        0 0 12px rgba(0, 229, 229, 0.22),
        0 0 20px rgba(22, 140, 255, 0.12);

    transform: translateY(-3px);
}


/* ---------- PRODUCT TITLES ---------- */

.product-title,
.product-name,
.card-title {
    color: #ffffff;
    font-weight: 700;
}


/* ---------- PRODUCT PRICES ---------- */

.price,
.product-price {
    color: #00e5e5;
    font-weight: 700;
}


/* ---------- FORMS / DROPDOWNS ---------- */

input,
select,
textarea {
    background-color: #0a1115;

    color: #ffffff;

    border: 1px solid rgba(0, 229, 229, 0.35);
    border-radius: 5px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #00e5e5;
    outline: none;

    box-shadow:
        0 0 8px rgba(0, 229, 229, 0.25);
}


/* ---------- FOOTER ---------- */

footer {
    background-color: #030608;

    color: #9ba9b0;

    border-top: 1px solid rgba(0, 229, 229, 0.25);
}

footer a {
    color: #b8c7cd;
}

footer a:hover {
    color: #00ffff;
}


/* ---------- TEXT SELECTION ---------- */

::selection {
    background-color: #007f86;
    color: #ffffff;
}


/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #05090c;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        #008c94,
        #167bd8
    );

    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        #00c5c5,
        #168cff
    );
}
}