/* =====================================================================
   style-category.css  —  NEW, additive. Loaded AFTER style.css so these
   rules win. Does not modify the shared live stylesheet.
   ===================================================================== */

/* ---- Product grid ---- */
.kap-products { margin-top: 10px; }
.kap-products > [class*="col-"] { margin-bottom: 22px; }

/* ---- Card: clean, no border offset (uses a shadow ring instead) ---- */
.kap-card {
    display: block;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 0 0 1px #ececec;
    transition: box-shadow .2s ease, transform .2s ease;
}
.kap-card:hover {
    box-shadow: 0 0 0 1px #d4a017;
    transform: translateY(-3px);
}

/* ---- Image: fills the card; slight zoom crops the baked-in dark edge ---- */
.kap-card-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
}
.kap-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);   /* tune 1.04–1.08 to just swallow the border */
    display: block;
    border-radius: 10px;
}

/* ---- Pagination ---- */
.kap-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 34px 0 6px;
    padding: 0;
}
.kap-pagination a,
.kap-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #fff;
    color: #1f2d3d;
    font-size: 14px;
    text-decoration: none;
    transition: all .15s ease;
}
.kap-pagination a:hover { border-color: #d4a017; color: #d4a017; }
.kap-pagination .is-active { background: #1f2d3d; color: #fff; border-color: #1f2d3d; }
.kap-pagination .is-disabled { opacity: .45; pointer-events: none; }
.kap-pagination .is-gap { border: 0; background: transparent; min-width: 20px; }

/* ---- Mobile ---- */
@media (max-width: 767px) {
    .site-breadcrumb .breadcrumb-title { font-size: 1.7rem; line-height: 1.2; }
    .kap-products > [class*="col-"] { padding-left: 8px; padding-right: 8px; margin-bottom: 16px; }
}

/* Product-page name banner: stop the purple label overlapping the name */
.product-name-head {
    background: #ffd268;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}
.product-name-head .pn-label {
    display: inline-block;
    background: #6f27b1;
    color: #fff;
    padding: 4px 11px;
    border-radius: 4px;
    margin-right: 8px;
    white-space: nowrap;
}

/* Product page main image: crop the baked-in dark edge like the cards */
.service-details-img {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 1px #ececec, 0 6px 20px rgba(0,0,0,.06);
    background: #fff;
}
.service-details-img img {
    width: 100%;
    display: block;
    transform: scale(1.06);
}

/* ===== Premium enquiry / quote box ===== */
.kap-quote {
    background: linear-gradient(180deg,#ffffff 0%,#f7f8fa 100%);
    border-radius: 16px;
    padding: 26px 22px 28px;
    box-shadow: 0 0 0 1px #ededed, 0 12px 30px rgba(0,0,0,.06);
}
.kap-quote .login-header { margin-bottom: 18px; }
.kap-quote .login-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2d3d;
    margin: 0;
    padding-bottom: 14px;
    position: relative;
}
.kap-quote .login-header h3::after {          /* short gold underline accent */
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 46px; height: 3px;
    background: #d4a017;
    border-radius: 3px;
}
.kap-quote .form-group { margin-bottom: 14px; }
.kap-quote .form-control {
    height: 50px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 14px;
    background: #fff;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.kap-quote textarea.form-control { height: auto; min-height: 110px; padding: 12px 16px; }
.kap-quote .form-control:focus {
    border-color: #d4a017;
    box-shadow: 0 0 0 3px rgba(212,160,23,.15);
    outline: none;
}
.kap-quote .theme-btn {
    width: 100%;
    justify-content: center;
    height: 52px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    box-shadow: 0 8px 18px rgba(31,45,61,.18);
    transition: transform .15s ease, box-shadow .15s ease;
}
.kap-quote .theme-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(31,45,61,.25); }

@media (max-width: 767px) {
    .kap-quote { padding: 22px 18px 24px; margin-top: 24px; }
    .kap-quote .login-header h3 { font-size: 20px; line-height: 1.3; }
}

/* ===== Product page: premium spec table + touches ===== */
.kap-spec {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
    margin-top: 6px;
}
.kap-spec td {
    padding: 13px 16px;
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}
.kap-spec tr:last-child td { border-bottom: 0; }
.kap-spec td:first-child {
    width: 38%;
    background: #fafbfc;
    font-weight: 600;
    color: #1f2d3d;
    border-right: 1px solid #f0f0f0;
}
.kap-spec tr:hover td { background: #fffdf5; }   /* soft gold row hover */

/* Availability pill */
.kap-stock {
    display: inline-block;
    background: #e6f7ec;
    color: #12813f;
    padding: 4px 13px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
}

/* WhatsApp price as a button */
.kap-spec td a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #25D366;
    color: #fff;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}
.kap-spec td a:hover { background: #1da851; }

/* Use-cases callout */
.kap-usecases {
    background: #f7f8fa;
    border-left: 4px solid #d4a017;
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 18px;
    font-size: 14px;
}

/* Premium single-line tagline above the grid */
.kap-cat-tagline {
    text-align: center;
    max-width: 760px;
    margin: 4px auto 26px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: #4a5568;
    position: relative;
    padding-bottom: 16px;
}
.kap-cat-tagline::after {           /* small gold underline accent */
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 54px; height: 3px;
    border-radius: 3px;
    background: #d4a017;
}

/* Lower SEO block: smaller, tidy heading on mobile */
@media (max-width: 767px) {
    .kap-cat-seo h2 { font-size: 20px; line-height: 1.3; }
    .kap-cat-seo h3 { font-size: 17px; line-height: 1.3; }
    .kap-cat-seo p  { font-size: 14px; line-height: 1.6; }
    .kap-cat-tagline { font-size: 14px; margin-bottom: 20px; }
}

@media (max-width: 767px) {
    .service-single-area.py-120 { padding-top: 24px; padding-bottom: 40px; }
}

/* ===== Event gallery ===== */
.kap-gallery > [class*="col-"] { margin-bottom: 24px; }
.kap-gallery .gallery-item { position: relative; }

.kap-gallery .gallery-img {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    line-height: 0;                 /* kills the sub-pixel gap under the img */
    min-height: 1px;
}
.kap-gallery .gallery-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity .35s ease;  /* fade, not scale — height never changes */
}
.kap-gallery .gallery-item:hover .gallery-img img { opacity: .85; }

.kap-gallery .gallery-item::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(31,45,61,0) 45%, rgba(31,45,61,.55) 100%);
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.kap-gallery .gallery-item:hover::after { opacity: 1; }

.kap-gallery .gallery-link {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
.kap-gallery .kap-gallery-zoom {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.65);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 18px; opacity: 0; transition: opacity .35s ease;
}
.kap-gallery .gallery-item:hover .kap-gallery-zoom { opacity: 1; }

/* Intro tagline above the grid */
.gallery-area .kap-cat-tagline { max-width: 900px; }

/* Bottom headline + text block */
.kap-gallery-cta {
    /*max-width: 760px;*/
    margin: 30px 0 10px 0;
    text-align: left;
}
.kap-gallery-cta h2 {
    text-align: left;
    font-size: 28px;
    font-weight: 700;
    color: #1f2d3d;
    margin-bottom: 16px;
}
.kap-gallery-cta p {
    color: #4a5568;
    line-height: 1.7;
    font-size: 15px;
    margin-bottom: 14px;
}
.kap-gallery-cta .btn-wrap { text-align: center; margin-top: 6px; }

/* ---- Desktop ---- */
@media (min-width: 992px) {
    .gallery-area.py-120 { padding-top: 40px; }
    .gallery-area .kap-cat-tagline { white-space: nowrap; max-width: none; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
    .service-single-area.py-120,
    .gallery-area.py-120 { padding-top: 24px; padding-bottom: 40px; }

    .kap-gallery > [class*="col-"] { margin-bottom: 16px; }

    .kap-gallery-cta { margin-top: 20px; padding: 0 4px; }
    .kap-gallery-cta h2 { font-size: 22px; line-height: 1.3; margin-bottom: 12px; }
    .kap-gallery-cta p { font-size: 14px; line-height: 1.65; margin-bottom: 14px; }
    .kap-gallery-cta .theme-btn { width: 100%; justify-content: center; }
}

/* ===== Unified content typography (category / product / gallery) ===== */
.kap-content h2,
.kap-content h3.kap-content-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2d3d;
    margin: 0 0 16px;
    text-align: left;
}
.kap-content p {
    font-size: 15px;
    line-height: 1.75;
    color: #4a5568;
    margin: 0 0 14px;
    text-align: left;
}
.kap-content p strong { color: #1f2d3d; }

@media (max-width: 767px) {
    .kap-content h2,
    .kap-content h3.kap-content-title { font-size: 21px; }
    .kap-content p { font-size: 14px; line-height: 1.65; }
}

  @media (max-width: 767px) {
       .service-single-area.py-120,
       .gallery-area.py-120,
       .contact-area.py-120 { padding-top: 24px; padding-bottom: 40px; }
   }
   
   
/* =====================================================================
   KAPITAL AWARDS · category page upgrade — APPEND to style-category.css
   (v2: left-aligned banner/intro · premium name cards · sidebar markers)
   Scoped under .kap- so nothing here collides with existing styles.
   Palette: navy #16283f, gold #c9992a.
   ===================================================================== */
:root {
    --kap-navy: #16283f;
    --kap-navy-soft: #33445c;
    --kap-gold: #c9992a;
    --kap-gold-dark: #a87e1f;
    --kap-line: #e7e9ee;
    --kap-bg-soft: #f7f8fa;
}

/* ---------------- Left-aligned breadcrumb (category pages only) ---------------- */
.kap-breadcrumb-left .breadcrumb-title {
    text-align: left !important;
}
.kap-breadcrumb-left .breadcrumb-menu {
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 0;
    margin-left: 0;
}

/* ---------------- Intro block (LEFT aligned) ---------------- */
.kap-cat-intro { margin-bottom: 3rem; }
.kap-cat-intro,
.kap-cat-intro .kap-cat-intro-title,
.kap-cat-intro .kap-cat-intro-text { text-align: left !important; }

.kap-cat-intro-title {
    font-size: clamp(1.2rem, 1.9vw, 1.55rem);
    font-weight: 700;
    color: var(--kap-navy);
    margin-bottom: .9rem;
    line-height: 1.3;
}
.kap-cat-intro-title::after {
    content: "";
    display: block;
    width: 64px; height: 3px;
    background: var(--kap-gold);
    margin: 1rem 0 0;                 /* underline sits on the left */
    border-radius: 2px;
}
.kap-cat-intro-text {
    font-size: 1.02rem;
    line-height: 1.75;
    color: #55606f;
    margin: 0;
    max-width: none;                  /* fill the column, no early wrap */
}

/* ---------------- Layout ---------------- */
.kap-cat-layout { position: relative; }

/* ---------------- Sidebar (desktop only) ---------------- */
.kap-cat-sidebar {
    position: sticky;
    top: 100px;
    border: 1px solid var(--kap-line);
    border-radius: 12px;
    padding: 1.25rem 1.25rem .5rem;
    background: #fff;
}
.kap-cat-group { margin-bottom: 1.35rem; }
.kap-cat-group-title {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kap-gold-dark);
    margin: 0 0 .6rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--kap-line);
}
.kap-cat-links { list-style: none; margin: 0; padding: 0; }
.kap-cat-links li { margin: 0; }

/* premium diamond marker on every item (on-brand for an awards site) */
.kap-cat-links a {
    position: relative;
    display: block;
    padding: .45rem .2rem .45rem 1.15rem;
    font-size: .95rem;
    color: var(--kap-navy-soft);
    text-decoration: none;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease, padding-left .15s ease;
}
.kap-cat-links a::before {
    content: "";
    position: absolute; left: .38rem; top: 50%;
    width: 6px; height: 6px;
    background: var(--kap-gold);
    transform: translateY(-50%) rotate(45deg) scale(.72);   /* diamond */
    opacity: .45;
    transition: opacity .15s ease, transform .15s ease, left .15s ease;
}
.kap-cat-links a:hover {
    color: var(--kap-navy);
    background: var(--kap-bg-soft);
    padding-left: 1.3rem;
}
.kap-cat-links a:hover::before {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg) scale(1);
    left: .5rem;
}
.kap-cat-links a.is-current {
    color: var(--kap-gold-dark);
    font-weight: 700;
    background: rgba(201,153,42,.08);
}
.kap-cat-links a.is-current::before {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg) scale(1);
}
.kap-cat-also {
    border-top: 1px solid var(--kap-line);
    padding-top: 1rem;
    margin-top: .25rem;
}
.kap-cat-also-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #98a1ad;
    margin-bottom: .4rem;
}

/* ---------------- Premium product card (name, not SKU) ---------------- */
.kap-card {
    display: block;
    margin-bottom: 1.5rem;
    border: 1px solid var(--kap-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kap-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(22,40,63,.12);
    border-color: rgba(201,153,42,.5);
}
.kap-card-img { padding: 0; background: #fff; }

.kap-card-img img { display: block; width: 100%; height: auto; }
.kap-card-body {
    position: relative;
    padding: .55rem .75rem .7rem;
    border-top: 1px solid var(--kap-line);
    text-align: center;
}
/* small gold flourish above the name */
.kap-card-body::before {
    content: "";
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 2px; background: var(--kap-gold);
}
.kap-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;               /* uniform 2-line reserve, more compact */
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--kap-navy);
    transition: color .15s ease;
}
.kap-card:hover .kap-card-name { color: var(--kap-gold-dark); }

/* ---------------- Load More ---------------- */
.kap-loadmore-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin-top: 2.5rem;
}
.kap-loadmore {
    display: inline-block;
    padding: .8rem 2.4rem;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--kap-navy);
    border-radius: 40px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}
.kap-loadmore:hover { background: var(--kap-gold); color: #fff; }
.kap-loadmore:active { transform: translateY(1px); }
.kap-loadmore.is-loading { opacity: .7; pointer-events: none; }
.kap-loadmore.is-loading::after {
    content: "";
    display: inline-block;
    width: 14px; height: 14px;
    margin-left: .6rem;
    vertical-align: -2px;
    border: 2px solid rgba(255,255,255,.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kap-spin .6s linear infinite;
}
@keyframes kap-spin { to { transform: rotate(360deg); } }

/* ---------------- SEO body content spacing ---------------- */
.kap-cat-seo h2 { font-size: 1.28rem; color: var(--kap-navy); margin: 2rem 0 .8rem; }
.kap-cat-seo h3 { font-size: 1.05rem; color: var(--kap-navy); margin: 1.4rem 0 .5rem; }
.kap-cat-seo p  { line-height: 1.8; color: #55606f; margin-bottom: 1rem; }
.kap-cat-seo a  { color: var(--kap-gold-dark); font-weight: 600; }

/* ---------------- FAQ accordion ---------------- */
.kap-faq-heading {
    text-align: center;
    font-size: clamp(1.25rem, 1.9vw, 1.55rem);
    color: var(--kap-navy);
    margin-bottom: 1.8rem;
}
.kap-faq-item {
    border: 1px solid var(--kap-line);
    border-radius: 10px;
    margin-bottom: .75rem;
    overflow: hidden;
    background: #fff;
}
.kap-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    background: none;
    border: 0;
    text-align: left;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--kap-navy);
    cursor: pointer;
}
.kap-faq-item.is-open .kap-faq-q { color: var(--kap-gold-dark); }
.kap-faq-icon { flex: 0 0 auto; width: 12px; height: 12px; position: relative; }
.kap-faq-icon::before,
.kap-faq-icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}
.kap-faq-icon::before { top: 5px; left: 0; width: 12px; height: 2px; }
.kap-faq-icon::after  { top: 0; left: 5px; width: 2px; height: 12px; }
.kap-faq-item.is-open .kap-faq-icon::after { transform: scaleY(0); opacity: 0; }
.kap-faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.kap-faq-item.is-open .kap-faq-a { max-height: 600px; }
.kap-faq-a-inner { padding: 0 1.25rem 1.15rem; line-height: 1.75; color: #55606f; }

/* ---------------- Small-screen tidy ---------------- */
@media (max-width: 991.98px) {
    .kap-cat-intro { margin-bottom: 2rem; }
    .kap-loadmore-wrap { margin-top: 1.8rem; }
}