/* =====================================
   WEARABLES PAGE — EMERALD GREEN THEME
   ===================================== */


body.wearables {
    background: #0b1712;
    color: white;
}

/* HEADER */

body.wearables .header {
    background: linear-gradient(
        135deg,
        #0e201a,
        #143126,
        #091410
    );

    border-bottom: 2px solid #45ac75;
}

body.wearables .brand h1 {
    color: #d4af37;
}

body.wearables .brand p {
    color: #339443;
}

body.wearables .special-letter {
    color: #1f705f;
}

/* HEADER BUTTONS */

body.wearables .cart button,
body.wearables .contact-button a {
    background: linear-gradient(
        to bottom,
        #3fa66d,
        #246b46
    );

    color: white;
    border: 1px solid #80d5a5;
}

body.wearables .cart button:hover,
body.wearables .contact-button a:hover {
    background: linear-gradient(
        to bottom,
        #59bd85,
        #31875a
    );

    color: white;
}

/* TOP BANNER */

body.wearables .wearables-banner {
    width: 100%;
    padding: 15px;
    text-align: center;

    background: linear-gradient(
        90deg,
        #08130f,
        #28764e,
        #3fa66d,
        #28764e,
        #08130f
    );

    border-top: 1px solid #63c48d;
    border-bottom: 1px solid #63c48d;

    color: white;
    font-size: 18px;
    font-weight: bold;
}

body.wearables .wearables-banner span {
    display: inline-block;
    margin: 4px 25px;
}

/* CATEGORY MENU */

body.wearables aside {
    background: #10251c;
    border: 1px solid #3fa66d;
}

body.wearables aside h3 {
    color: #d4af37;
    border-bottom-color: #3fa66d;
}

body.wearables aside a {
    color: white;
}

body.wearables aside a:hover {
    color: #78d39f;
}

body.wearables aside a.active-category {
    color: #78d39f;
    font-weight: bold;
}

/* PAGE TITLE */

body.wearables .collection-title {
    margin: 0 0 25px;
    color: #d4af37;
    font-family: "Cinzel", serif;
    font-size: 34px;
    text-align: center;
}

/* PRODUCT CARDS */

body.wearables .product {
    background: linear-gradient(
        145deg,
        #10251c,
        #173a2a
    );

    border: 1px solid #3fa66d;
}

body.wearables .product:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 22px rgba(63, 166, 109, 0.65);
}

body.wearables .product img,
body.wearables .product-media {
    background: transparent;
    border-radius: 8px;
}


body.wearables .product h3 {
    color: #f3f3f3;
}

body.wearables .wearable-number {
    display: block;
    margin-bottom: 8px;
    color: #8ad7aa;
    font-size: 14px;
    font-weight: bold;
}

body.wearables .old {
    color: #b8b8b8;
}

body.wearables .price {
    color: #7fe0a8;
}

/* PRODUCT BUTTONS */

body.wearables .product button {
    width: 130px;
    margin: 6px 3px;
    padding: 8px 10px;

    background: linear-gradient(
        to bottom,
        #3fa66d,
        #246b46
    );

    color: white;

    border: 1px solid #80d5a5;
    border-radius: 20px;

    font-size: 13px;
    font-weight: bold;
    cursor: pointer;

    transition: all 0.25s ease;
}

body.wearables .product button:hover {
    background: linear-gradient(
        to bottom,
        #63c48d,
        #31875a
    );

    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 196, 141, 0.45);
}

body.wearables .product button:active {
    transform: translateY(0);
}

/* FOOTER */

body.wearables footer {
    margin-top: 40px;
    padding: 25px;
    text-align: center;

    background: #08130f;
    border-top: 1px solid #3fa66d;

    color: #b9d8c8;
}

/* RESPONSIVE */

@media (max-width: 900px) {

    body.wearables .wearables-banner span {
        margin: 5px 10px;
    }
}

@media (max-width: 700px) {

    body.wearables .collection-title {
        font-size: 26px;
    }

    body.wearables .wearables-banner {
        font-size: 15px;
    }

    body.wearables .wearables-banner span {
        display: block;
        margin: 6px;
    }
}
/* =====================================
   WEARABLE PRODUCT POPUP
   ===================================== */

body.wearables .product-container {
    background: linear-gradient(
        145deg,
        #10251c,
        #173a2a
    );

    border: 1px solid #3fa66d;
}

body.wearables .product-info {
    background: #10251c;
    border: 1px solid #3fa66d;
}

body.wearables .product-info h1,
body.wearables .product-info h2,
body.wearables #productTitle {
    color: #d4af37;
}

body.wearables .product-description,
body.wearables #productDescription {
    color: #f1f1f1;
}

body.wearables .old-price,
body.wearables #oldPrice {
    color: #b8b8b8;
}

body.wearables .price,
body.wearables #price {
    color: #7fe0a8;
}

body.wearables .main-product-image,
body.wearables #mainProduct {
    background: #edf5f0;
    border: 1px solid #3fa66d;
}

body.wearables .thumbnail,
body.wearables .thumb {
    border: 1px solid #3fa66d;
    background: #edf5f0;
}

body.wearables button,
body.wearables .buy-button {
    background: linear-gradient(
        to bottom,
        #3fa66d,
        #246b46
    );

    color: white;
    border: 1px solid #80d5a5;
}

body.wearables button:hover,
body.wearables .buy-button:hover {
    background: linear-gradient(
        to bottom,
        #63c48d,
        #31875a
    );
}
/* BAR ABOVE THUMBNAILS */
body.wearables .enlarge-note {
    background: #246b46 !important;
    color: white !important;
    border-color: #80d5a5 !important;
}
body.wearables .thumbnails img {
    background: #edf5f0 !important;
    border: 1px solid #3fa66d !important;
}
/* WEARABLE POPUP — REPLACE ORIGINAL GOLD */

body.wearables .description-box {
    background: #10251c !important;
    border-color: #3fa66d !important;
}

body.wearables .description-box h1 {
    color: #d4af37 !important;
}

body.wearables .watch-banner {
    background: linear-gradient(
        90deg,
        #08130f,
        #28764e,
        #3fa66d,
        #28764e,
        #08130f
    ) !important;

    border-top: 1px solid #63c48d !important;
    border-bottom: 1px solid #63c48d !important;
    color: white !important;
}
/* WEARABLE POPUP TEXT AND MENU COLORS */

body.wearables .description-box h1,
body.wearables #title {
    color: #7fe0a8 !important;
}

body.wearables .brand h1 {
    color: #7fe0a8 !important;
}

body.wearables aside h3 {
    color: #7fe0a8 !important;
}

body.wearables aside a:hover {
    color: #7fe0a8 !important;
}
body.wearables .big-product {
    width: 350px !important;
    max-width: 350px !important;
    flex: 0 0 350px !important;
}

body.wearables #mainProduct {
    width: 100% !important;
    max-width: 450px !important;
    height: auto !important;
    object-fit: contain;
}

/* WEARABLES PHONE LAYOUT */

@media (max-width: 700px) {

    /* SMALLER HEADER */

    body.wearables .header {
        padding: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.wearables .logo2 {
        width: 60px !important;
        margin: 0 auto 4px !important;
    }

    body.wearables .brand {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    body.wearables .brand h1 {
        margin: 0 !important;
        font-size: 25px !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
    }

    body.wearables .brand p {
        margin: 4px 0 0 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    body.wearables .header-buttons {
        width: 100% !important;
        margin-top: 5px !important;
        transform: none !important;
        text-align: center !important;
    }

    body.wearables .contact-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        margin-top: 4px !important;
    }

    body.wearables .contact-button a {
        width: 175px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    /* SMALLER BANNER */
/*====Banner Text size======*/
    body.wearables .wearables-banner,
    body.wearables .watch-banner {
        padding: 8px 4px !important;
        font-size: 8px !important;
    }

    body.wearables .wearables-banner span,
    body.wearables .watch-banner span {
        display: inline-block !important;
        margin: 3px 5px !important;
    }

    /* COMPACT CATEGORY MENU */

    body.wearables .layout {
        padding: 12px !important;
    }

    body.wearables aside {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex: none !important;
    margin: 0 0 10px !important;
    padding: 7px 10px !important;
}

body.wearables aside h3 {
    margin: 0 0 5px !important;
    padding-bottom: 4px !important;
    font-size: 16px !important;
}
/*=====font soze below=====*/
body.wearables aside a {
    display: inline-block !important;
    margin: 1px 7px 1px 0 !important;
    padding: 2px 1px !important;
    font-size: 9px !important;
}

    /* TWO CARDS SIDE BY SIDE */

    body.wearables .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.wearables .product {
        min-width: 0 !important;
        padding: 6px !important;
    }

    body.wearables .product img,
    body.wearables .product video,
    body.wearables .product-media {
        height: 100px !important;
        object-fit: contain !important;
    }

   body.wearables .product h3 {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin: 6px 0 !important;
}

body.wearables .old {
    font-size: 9px !important;
}

body.wearables .price {
    font-size: 14px !important;
}

body.wearables .product button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 3px !important;
    font-size: 9px !important;
}

    body.wearables .collection-title {
        font-size: 24px !important;
    }
body.wearables .header-buttons {
    display: flex;
    align-items: center;
    gap: 18px;
}

body.wearables .contact-button {
    display: flex;
    align-items: center;
}

body.wearables .cart-icon {
    margin-left: 0;
}
}