/* WORKING SERVICE CARD HOVER FIX
   Keep this file loaded AFTER style.css and AFTER gold-moodboard.css.
   Purpose: stop the old red overlay, but keep a visible premium hover effect. */

.categories-area .single-cat {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(201, 152, 47, .34) !important;
    color: #12100b !important;
    transform: translateY(0) !important;
    box-shadow: 0 18px 52px rgba(17, 16, 13, .10) !important;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease !important;
}

/* Kill the old template red overlay and replace it with a thin gold accent. */
.categories-area .single-cat::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 0 !important;
    height: 5px !important;
    background: linear-gradient(90deg, #9b6a12, #d7a83d, #fff0b8) !important;
    border: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: width .32s ease !important;
}

.categories-area .single-cat:hover,
.categories-area .single-cat:focus-within {
    background: linear-gradient(180deg, #fffdf7 0%, #fff1c7 100%) !important;
    border-color: rgba(201, 152, 47, .75) !important;
    transform: translateY(-10px) !important;
    box-shadow: 0 30px 76px rgba(17, 16, 13, .18) !important;
}

.categories-area .single-cat:hover::before,
.categories-area .single-cat:focus-within::before {
    width: 100% !important;
    height: 5px !important;
    background: linear-gradient(90deg, #9b6a12, #d7a83d, #fff0b8) !important;
}

.categories-area .single-cat .cat-cap,
.categories-area .single-cat .cat-icon {
    position: relative !important;
    z-index: 2 !important;
}

.categories-area .single-cat .cat-cap h5,
.categories-area .single-cat .cat-cap h5 a,
.categories-area .single-cat:hover .cat-cap h5,
.categories-area .single-cat:hover .cat-cap h5 a,
.categories-area .single-cat:focus-within .cat-cap h5,
.categories-area .single-cat:focus-within .cat-cap h5 a {
    color: #12100b !important;
}

.categories-area .single-cat .cat-cap p,
.categories-area .single-cat:hover .cat-cap p,
.categories-area .single-cat:focus-within .cat-cap p {
    color: #665f53 !important;
}

.categories-area .single-cat .cat-cap a,
.categories-area .single-cat:hover .cat-cap a,
.categories-area .single-cat:focus-within .cat-cap a,
.categories-area .single-cat .service-link,
.categories-area .single-cat:hover .service-link,
.categories-area .single-cat:focus-within .service-link {
    color: #b47b08 !important;
}

.categories-area .single-cat .cat-icon {
    background: linear-gradient(135deg, #fff3c8, #c9982f) !important;
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease !important;
}

.categories-area .single-cat:hover .cat-icon,
.categories-area .single-cat:focus-within .cat-icon {
    transform: scale(1.06) rotate(-2deg) !important;
    background: linear-gradient(135deg, #fff7d8, #d8a538) !important;
    box-shadow: 0 18px 38px rgba(201, 152, 47, .32) !important;
}

.categories-area .single-cat .cat-icon span,
.categories-area .single-cat:hover .cat-icon span,
.categories-area .single-cat:focus-within .cat-icon span {
    color: #17130c !important;
}