/* =========================================
   TopStore Services Hub - Mobile Beautiful UI
   ========================================= */

.ts-services-wrap {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 34px 16px 50px !important;
}

/* Hero section */
.ts-services-hero {
    background: linear-gradient(135deg, #101827 0%, #2d1f26 38%, #ff6a00 100%) !important;
    border-radius: 22px !important;
    padding: 34px 28px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16) !important;
}

.ts-services-hero h1 {
    font-size: 34px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 12px !important;
}

.ts-services-hero p {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Search filter box */
.ts-services-filter {
    border-radius: 20px !important;
    padding: 18px !important;
    gap: 12px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

.ts-services-filter input,
.ts-services-filter select {
    height: 56px !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.ts-services-filter button {
    height: 56px !important;
    border-radius: 16px !important;
    background: #ff6a00 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(255, 106, 0, 0.28) !important;
}

/* Provider grid */
.ts-services-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

/* Provider card */
.ts-service-card {
    border-radius: 24px !important;
    border: 1px solid #eef0f4 !important;
    overflow: hidden !important;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.10) !important;
    background: #fff !important;
}

.ts-service-img {
    height: 210px !important;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
}

.ts-service-img div {
    font-size: 16px !important;
    color: #64748b !important;
}

/* Card body */
.ts-service-body {
    padding: 18px !important;
}

.ts-service-title-row {
    align-items: center !important;
    margin-bottom: 12px !important;
}

.ts-service-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

.ts-verified {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #86efac !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.ts-service-meta {
    font-size: 14px !important;
    color: #334155 !important;
    margin: 8px 0 !important;
    line-height: 1.45 !important;
}

.ts-service-meta strong {
    color: #0f172a !important;
    font-weight: 900 !important;
}

.ts-service-desc {
    font-size: 14px !important;
    color: #1f2937 !important;
    line-height: 1.6 !important;
    margin-top: 14px !important;
}

/* Buttons */
.ts-service-actions {
    gap: 10px !important;
    margin-top: 16px !important;
}

.ts-service-actions a {
    border-radius: 14px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.ts-call-btn {
    background: #111827 !important;
    color: #fff !important;
}

.ts-whatsapp-btn {
    background: #16a34a !important;
    color: #fff !important;
}

.ts-view-btn {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #fed7aa !important;
}

/* No results box */
.ts-no-results {
    border-radius: 18px !important;
    padding: 20px !important;
    font-size: 15px !important;
}

/* =========================================
   Mobile Layout
   ========================================= */
@media (max-width: 768px) {

    .ts-services-wrap {
        padding: 18px 12px 38px !important;
    }

    .ts-services-hero {
        border-radius: 20px !important;
        padding: 24px 18px !important;
        margin-bottom: 16px !important;
    }

    .ts-services-hero h1 {
        font-size: 26px !important;
        line-height: 1.15 !important;
        margin-bottom: 10px !important;
    }

    .ts-services-hero p {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .ts-services-filter {
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 14px !important;
        border-radius: 18px !important;
        gap: 10px !important;
        margin-bottom: 18px !important;
    }

    .ts-services-filter input,
    .ts-services-filter select,
    .ts-services-filter button {
        width: 100% !important;
        height: 52px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
    }

    .ts-services-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .ts-service-card {
        border-radius: 22px !important;
    }

    .ts-service-img {
        height: 185px !important;
    }

    .ts-service-body {
        padding: 16px !important;
    }

    .ts-service-title-row {
        display: flex !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .ts-service-title {
        font-size: 19px !important;
        line-height: 1.25 !important;
    }

    .ts-verified {
        font-size: 11px !important;
        padding: 5px 9px !important;
    }

    .ts-service-meta {
        font-size: 13.5px !important;
        margin: 7px 0 !important;
    }

    .ts-service-desc {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .ts-service-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .ts-service-actions a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 12px 10px !important;
    }

    .ts-view-btn {
        grid-column: 1 / -1 !important;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    .ts-services-hero h1 {
        font-size: 23px !important;
    }

    .ts-service-img {
        height: 165px !important;
    }

    .ts-service-title {
        font-size: 18px !important;
    }
}





/* =========================================
   TopStore Services Hub - Fix View Details Mobile
   ========================================= */

body.single-ts_service_provider {
    overflow-x: hidden !important;
}

.single-ts_service_provider .ts-single-wrap,
.ts-single-wrap {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 20px 14px 45px !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.single-ts_service_provider .ts-single-card,
.ts-single-card {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.single-ts_service_provider .ts-single-media,
.ts-single-media {
    width: 100% !important;
    height: 260px !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
}

.single-ts_service_provider .ts-single-media img,
.single-ts_service_provider .ts-single-media video,
.ts-single-media img,
.ts-single-media video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.single-ts_service_provider .ts-single-body,
.ts-single-body {
    width: 100% !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.single-ts_service_provider .ts-single-body *,
.ts-single-body * {
    box-sizing: border-box !important;
}

.single-ts_service_provider .ts-single-title-row,
.ts-single-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
}

.single-ts_service_provider .ts-single-title-row h1,
.ts-single-title-row h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0f172a !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    max-width: 75% !important;
    word-break: normal !important;
}

.single-ts_service_provider .ts-verified,
.ts-verified {
    font-size: 12px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    text-transform: none !important;
}

.single-ts_service_provider .ts-rating-line,
.ts-rating-line {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 10px 0 14px !important;
    text-align: left !important;
}

.single-ts_service_provider .ts-stars,
.ts-stars {
    font-size: 18px !important;
    line-height: 1 !important;
}

.single-ts_service_provider .ts-social-row,
.ts-social-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 14px 0 !important;
}

.single-ts_service_provider .ts-follow-btn,
.single-ts_service_provider .ts-comments-link,
.ts-follow-btn,
.ts-comments-link {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    text-align: center !important;
    justify-content: center !important;
    text-transform: none !important;
}

.single-ts_service_provider .ts-single-info,
.ts-single-info {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 16px 0 !important;
}

.single-ts_service_provider .ts-single-info-box,
.ts-single-info-box {
    width: 100% !important;
    border-radius: 16px !important;
    padding: 13px !important;
    text-align: left !important;
    font-size: 14px !important;
}

.single-ts_service_provider .ts-single-description,
.ts-single-description {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    text-align: left !important;
    margin-top: 16px !important;
    color: #1f2937 !important;
    text-transform: none !important;
}

.single-ts_service_provider .ts-single-actions,
.ts-single-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.single-ts_service_provider .ts-single-actions a,
.ts-single-actions a {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    padding: 13px 10px !important;
    font-size: 14px !important;
    text-align: center !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.single-ts_service_provider .ts-gallery,
.ts-gallery {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 22px !important;
}

.single-ts_service_provider .ts-gallery img,
.ts-gallery img {
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 18px !important;
    display: block !important;
}

.single-ts_service_provider .ts-phase-note,
.ts-phase-note,
.single-ts_service_provider .ts-comments-section,
.ts-comments-section {
    width: 100% !important;
    border-radius: 18px !important;
    padding: 15px !important;
    margin-top: 18px !important;
    text-align: left !important;
}

.single-ts_service_provider .ts-comments-section h2,
.ts-comments-section h2 {
    font-size: 21px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-transform: none !important;
}

.single-ts_service_provider .ts-comment-card,
.ts-comment-card,
.single-ts_service_provider .ts-review-form,
.ts-review-form {
    width: 100% !important;
    border-radius: 16px !important;
    padding: 14px !important;
    text-align: left !important;
}

/* Small phones */
@media (max-width: 480px) {
    .single-ts_service_provider .ts-single-wrap,
    .ts-single-wrap {
        padding: 16px 10px 40px !important;
    }

    .single-ts_service_provider .ts-single-card,
    .ts-single-card {
        max-width: 100% !important;
        border-radius: 22px !important;
    }

    .single-ts_service_provider .ts-single-media,
    .ts-single-media {
        height: 230px !important;
    }

    .single-ts_service_provider .ts-single-body,
    .ts-single-body {
        padding: 16px !important;
    }

    .single-ts_service_provider .ts-single-title-row h1,
    .ts-single-title-row h1 {
        font-size: 23px !important;
        max-width: 70% !important;
    }

    .single-ts_service_provider .ts-single-actions,
    .ts-single-actions,
    .single-ts_service_provider .ts-social-row,
    .ts-social-row {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* =====================================================
   TopStore Services Hub - View Details Mobile Final Fix
   Less side padding + normal wording
   ===================================================== */

body.single-ts_service_provider {
    overflow-x: hidden !important;
}

/* Remove extra container spacing from theme */
body.single-ts_service_provider .main-page-wrapper,
body.single-ts_service_provider .site-content,
body.single-ts_service_provider .content-layout-wrapper,
body.single-ts_service_provider .wd-content-layout,
body.single-ts_service_provider .container,
body.single-ts_service_provider .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Main wrapper */
body.single-ts_service_provider .ts-single-wrap,
body.single-ts_service_provider .ts-single-wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 8px 28px !important;
    box-sizing: border-box !important;
}

/* Card should sit near screen edges beautifully */
body.single-ts_service_provider .ts-single-card,
.ts-single-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Media */
body.single-ts_service_provider .ts-single-media,
.ts-single-media {
    width: 100% !important;
    height: 250px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
}

body.single-ts_service_provider .ts-single-media img,
body.single-ts_service_provider .ts-single-media video,
.ts-single-media img,
.ts-single-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Body */
body.single-ts_service_provider .ts-single-body,
.ts-single-body {
    width: 100% !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Remove all-caps feel */
body.single-ts_service_provider .ts-single-body *,
body.single-ts_service_provider .ts-single-card *,
.ts-single-body *,
.ts-single-card * {
    text-transform: none !important;
    letter-spacing: normal !important;
    word-break: normal !important;
}

/* Title row */
body.single-ts_service_provider .ts-single-title-row,
.ts-single-title-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

body.single-ts_service_provider .ts-single-title-row h1,
.ts-single-title-row h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-weight: 900 !important;
    text-align: left !important;
    max-width: 72% !important;
}

body.single-ts_service_provider .ts-verified,
.ts-verified {
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

/* Rating row */
body.single-ts_service_provider .ts-rating-line,
.ts-rating-line {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 8px 0 12px !important;
    font-size: 13px !important;
    text-align: left !important;
}

body.single-ts_service_provider .ts-stars,
.ts-stars {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Follow + comments */
body.single-ts_service_provider .ts-social-row,
.ts-social-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 12px 0 14px !important;
}

body.single-ts_service_provider .ts-follow-btn,
body.single-ts_service_provider .ts-comments-link,
.ts-follow-btn,
.ts-comments-link {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 10px !important;
}

/* Info boxes */
body.single-ts_service_provider .ts-single-info,
.ts-single-info {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 14px 0 !important;
}

body.single-ts_service_provider .ts-single-info-box,
.ts-single-info-box {
    width: 100% !important;
    padding: 12px 13px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

body.single-ts_service_provider .ts-single-info-box strong,
.ts-single-info-box strong {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* Description */
body.single-ts_service_provider .ts-single-description,
.ts-single-description {
    font-size: 15px !important;
    line-height: 1.7 !important;
    text-align: left !important;
    margin-top: 14px !important;
    color: #1f2937 !important;
}

/* Buttons */
body.single-ts_service_provider .ts-single-actions,
.ts-single-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 16px !important;
}

body.single-ts_service_provider .ts-single-actions a,
.ts-single-actions a {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    padding: 12px 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* Comments section */
body.single-ts_service_provider .ts-comments-section,
.ts-comments-section,
body.single-ts_service_provider .ts-phase-note,
.ts-phase-note {
    width: 100% !important;
    border-radius: 16px !important;
    padding: 14px !important;
    margin-top: 16px !important;
    text-align: left !important;
}

body.single-ts_service_provider .ts-comments-section h2,
.ts-comments-section h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    text-align: left !important;
}

body.single-ts_service_provider .ts-comment-card,
.ts-comment-card,
body.single-ts_service_provider .ts-review-form,
.ts-review-form {
    border-radius: 14px !important;
    padding: 13px !important;
    text-align: left !important;
}

/* Very small phones */
@media (max-width: 480px) {
    body.single-ts_service_provider .ts-single-wrap,
    .ts-single-wrap {
        padding: 6px 6px 24px !important;
    }

    body.single-ts_service_provider .ts-single-card,
    .ts-single-card {
        border-radius: 18px !important;
    }

    body.single-ts_service_provider .ts-single-media,
    .ts-single-media {
        height: 230px !important;
    }

    body.single-ts_service_provider .ts-single-body,
    .ts-single-body {
        padding: 12px !important;
    }

    body.single-ts_service_provider .ts-single-title-row h1,
    .ts-single-title-row h1 {
        font-size: 20px !important;
        max-width: 68% !important;
    }
}





/* =========================================================
   TopStore Services Showcase Bar - Story Style Professional
   More image space, less content, Facebook-story feel
   ========================================================= */

.ts-showcase-wrap {
    margin-bottom: 18px !important;
    padding: 0 8px !important;
}

.ts-showcase-head {
    margin: 8px 2px 12px !important;
}

.ts-showcase-title {
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.ts-showcase-sub {
    font-size: 12px !important;
    color: #64748b !important;
}

.ts-showcase-shell {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 10px !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.08) !important;
    overflow: hidden !important;
}

/* Track */
.ts-showcase-track {
    gap: 12px !important;
    padding-bottom: 2px !important;
}

/* Card becomes taller like a story */
.ts-showcase-card {
    position: relative !important;
    flex: 0 0 145px !important;
    height: 230px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
    text-decoration: none !important;
}

/* Entire image fills almost whole card */
.ts-showcase-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #dfe3e8 !important;
    overflow: hidden !important;
}

.ts-showcase-media img,
.ts-showcase-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Dark overlay for readable text */
.ts-showcase-card::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 50% !important;
    background: linear-gradient(to top, rgba(15,23,42,.88), rgba(15,23,42,.45), rgba(15,23,42,0)) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Play icon */
.ts-showcase-play {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(15,23,42,.70) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    z-index: 3 !important;
}

/* Body becomes overlay at bottom, very small */
.ts-showcase-body {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    padding: 12px 10px 10px !important;
    background: transparent !important;
}

/* Name row */
.ts-showcase-name-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

/* Provider name */
.ts-showcase-name {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

/* Verified badge */
.ts-showcase-verified {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #86efac !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    flex: 0 0 auto !important;
}

/* Service type small text */
.ts-showcase-service {
    margin-top: 6px !important;
    font-size: 12px !important;
    color: rgba(255,255,255,.92) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Town line */
.ts-showcase-town {
    margin-top: 3px !important;
    font-size: 11px !important;
    color: #fed7aa !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Smaller button chip instead of big full button */
.ts-showcase-view {
    display: inline-block !important;
    margin-top: 8px !important;
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-align: center !important;
    backdrop-filter: blur(4px) !important;
}

/* Fade edges */
.ts-showcase-fade-left,
.ts-showcase-fade-right {
    width: 22px !important;
}

/* Mobile */
@media (max-width: 768px) {
    .ts-showcase-wrap {
        padding: 0 6px !important;
    }

    .ts-showcase-shell {
        padding: 8px !important;
        border-radius: 18px !important;
    }

    .ts-showcase-card {
        flex: 0 0 132px !important;
        height: 215px !important;
        border-radius: 16px !important;
    }

    .ts-showcase-body {
        padding: 10px 9px 9px !important;
    }

    .ts-showcase-name {
        font-size: 14px !important;
    }

    .ts-showcase-service {
        font-size: 11px !important;
    }

    .ts-showcase-town {
        font-size: 11px !important;
    }

    .ts-showcase-view {
        font-size: 10px !important;
        padding: 5px 9px !important;
    }
}






/* =========================================================
   TopStore Services Showcase Bar - Contained Width Fix
   Removed full-width 100vw stretch.
   ========================================================= */

.ts-showcase-wrap {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.ts-showcase-head {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ts-showcase-shell {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px !important;
    padding: 10px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    border-top: 4px solid #d9dee7 !important;
    border-bottom: 4px solid #d9dee7 !important;
}

.ts-showcase-track {
    width: 100% !important;
    gap: 10px !important;
    padding-left: 0 !important;
    padding-right: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    box-sizing: border-box !important;
}

.ts-showcase-card {
    flex: 0 0 145px !important;
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    height: 230px !important;
}

body.page .ts-services-wrap {
    padding-top: 0 !important;
}

@media (max-width: 768px) {
    .ts-showcase-wrap {
        max-width: calc(100% - 20px) !important;
        width: calc(100% - 20px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ts-showcase-head {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ts-showcase-shell {
        border-radius: 16px !important;
        padding: 8px !important;
    }

    .ts-showcase-card {
        flex: 0 0 132px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        height: 210px !important;
    }

    body.page .ts-services-wrap {
        padding-top: 0 !important;
    }
}


TopStore Services Showcase - Become Provider Card
   ===================================================== */

.ts-join-provider-card {
    background: linear-gradient(135deg, #111827, #ff6a00) !important;
    border: 2px solid #ff6a00 !important;
}

.ts-join-provider-card::after {
    background: linear-gradient(to top, rgba(15,23,42,.95), rgba(15,23,42,.55), rgba(15,23,42,.10)) !important;
}

.ts-join-provider-media {
    background: linear-gradient(135deg, #111827, #ff6a00) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ts-join-plus {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #ff6a00 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
    z-index: 3 !important;
}

.ts-join-provider-card .ts-showcase-name {
    color: #fff !important;
}

.ts-join-provider-card .ts-showcase-service {
    color: #fff !important;
}

.ts-join-provider-card .ts-showcase-town {
    color: #fed7aa !important;
}

.ts-join-provider-card .ts-showcase-view {
    background: #fff !important;
    color: #c2410c !important;
    border-color: #fff !important;
}




/* =====================================================
   TopStore Become Service Provider Page - Final Mobile Fit
   Fix centered fields + stretch container on mobile
   ===================================================== */

/* Better form width on desktop */
.ts-apply-wrap {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Make all fields balanced and vertically centered */
.ts-apply-field input,
.ts-apply-field select {
    height: 58px !important;
    min-height: 58px !important;
    line-height: 58px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
}

/* Fix select/dropdown text sitting too low or too high */
.ts-apply-field select {
    line-height: normal !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Make labels cleaner */
.ts-apply-field label {
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
}

/* Desktop form spacing */
.ts-apply-form {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =====================================================
   Mobile: stretch closer to screen edges
   ===================================================== */

@media (max-width: 768px) {

    .ts-apply-wrap {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .ts-apply-hero,
    .ts-apply-note,
    .ts-apply-form,
    .ts-apply-support {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .ts-apply-hero {
        border-radius: 20px !important;
        padding: 22px 16px !important;
    }

    .ts-apply-note {
        border-radius: 16px !important;
        padding: 13px 14px !important;
    }

    .ts-apply-form {
        border-radius: 20px !important;
        padding: 14px 12px !important;
    }

    .ts-apply-grid {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    .ts-apply-field {
        width: 100% !important;
    }

    .ts-apply-field input,
    .ts-apply-field select,
    .ts-apply-field textarea {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
    }

    .ts-apply-field input,
    .ts-apply-field select {
        height: 56px !important;
        min-height: 56px !important;
        line-height: 56px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .ts-apply-submit {
        border-radius: 16px !important;
        min-height: 56px !important;
        font-size: 15px !important;
    }
}

/* Very small phones: even closer to edges */
@media (max-width: 430px) {
    .ts-apply-wrap {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .ts-apply-form {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}




/* =====================================================
   TopStore Sponsored Promotions - Contained Width Fix
   Removed edge-to-edge 100vw stretch.
   ===================================================== */

.ts-sponsored-shell {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.ts-sponsored-track {
    gap: 10px !important;
    padding-left: 0 !important;
    padding-right: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.ts-sponsored-track::-webkit-scrollbar {
    display: none !important;
}

@media (max-width: 768px) {
    .ts-sponsored-shell {
        max-width: calc(100% - 20px) !important;
        width: calc(100% - 20px) !important;
        padding: 8px !important;
        border-radius: 16px !important;
    }

    .ts-sponsored-card {
        flex: 0 0 280px !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        border-radius: 18px !important;
        box-shadow: none !important;
    }

    .ts-sponsored-media {
        height: 210px !important;
    }
}

@media (max-width: 430px) {
    .ts-sponsored-card {
        flex: 0 0 82vw !important;
        width: 82vw !important;
        min-width: 82vw !important;
        max-width: 82vw !important;
    }
}


Fix Customer Experience Card Hidden Under Showcase Bar
   ===================================================== */

/* Push experience section down below the fixed showcase */
.ts-exp2-section {
    padding-top: 40px !important;
    margin-top: 0px !important;
}

/* Force the heading and share experience card to show */
.ts-exp2-head,
.ts-exp2-join-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Keep heading layout nice */
.ts-exp2-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

/* Make the share experience card clear */
.ts-exp2-join-card {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 18px !important;
}

/* Mobile spacing */
@media (max-width: 768px) {
    .ts-exp2-section {
        padding-top: 24px !important;
        margin-top: -10px !important;
    }

    .ts-exp2-head {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .ts-exp2-join-card {
        margin-left: 6px !important;
        margin-right: 6px !important;
        width: calc(100% - 12px) !important;
    }
}


/* =========================================
   Top showcase row - Border only, no shadow
   ========================================= */

.ts-showcase-shell {
    box-shadow: none !important;
    border-top: 4px solid #d9dee7 !important;
    border-bottom: 4px solid #d9dee7 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: #fff !important;
}




/* =====================================================
   TopStore Showcase Bar - Force Auto Movement with CSS
   Works even when JavaScript auto-scroll fails
   ===================================================== */

/* Make sure the row can move */
.ts-showcase-track {
    overflow: visible !important;
    will-change: transform !important;
    animation: ts-showcase-auto-move 22s linear infinite alternate !important;
}

/* Pause movement when user touches/clicks/hover on desktop */
.ts-showcase-track:hover {
    animation-play-state: paused !important;
}

/* Smooth left-right movement */
@keyframes ts-showcase-auto-move {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-38%);
    }
}

/* Mobile: slower and not too far */
@media (max-width: 768px) {
    .ts-showcase-track {
        animation: ts-showcase-auto-move-mobile 20s linear infinite alternate !important;
    }

    @keyframes ts-showcase-auto-move-mobile {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-48%);
        }
    }
}


/* =====================================================
   TopStore Showcase - allow manual scroll + JS auto-scroll
   ===================================================== */

.ts-showcase-track {
    animation: none !important;
    transform: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
    will-change: scroll-position !important;
}



/* =====================================================
   TopStore story rows - allow shuffle + manual swipe
   ===================================================== */

.ts-showcase-track,
.ts-exp2-track {
    animation: none !important;
    transform: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}


/* =====================================================
   TopStore Forced Shuffle Support
   Allows visible card reshuffle movement
   ===================================================== */

.ts-showcase-track,
.ts-exp2-track {
    animation: none !important;
    transform: translateX(0);
    overflow-x: visible !important;
    overflow-y: hidden !important;
    display: flex !important;
    will-change: transform !important;
}

/* The shell keeps extra cards hidden while track moves */
.ts-showcase-shell,
.ts-exp2-row-shell {
    overflow: hidden !important;
}





/* =====================================================
   TopStore Showcase - Remove ghost/shadow behind Join Now
   ===================================================== */

.ts-showcase-track,
.ts-exp2-track {
    animation: none !important;
    transform: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    -webkit-overflow-scrolling: touch !important;
}

.ts-showcase-shell,
.ts-exp2-row-shell {
    overflow: hidden !important;
}

/* Keep Join Now card solid and clean */
.ts-join-provider-card {
    position: relative !important;
    z-index: 50 !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, #111827, #ff6a00) !important;
    box-shadow: none !important;
}

.ts-join-provider-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, #111827, #ff6a00) !important;
    z-index: 0 !important;
}

.ts-join-provider-card::after {
    background: linear-gradient(to top, rgba(15,23,42,.96), rgba(15,23,42,.72), rgba(15,23,42,.15)) !important;
    z-index: 1 !important;
}

.ts-join-provider-card .ts-showcase-media,
.ts-join-provider-card .ts-showcase-body,
.ts-join-provider-card .ts-join-plus {
    position: relative !important;
    z-index: 3 !important;
}

/* remove any old card movement shadow */
.ts-showcase-card {
    box-shadow: none !important;
}





.ts-services-wrap .ts-services-filter {
    display: none !important;
}

.ts-services-wrap .ts-services-hero {
    display: none !important;
}




/* =====================================================
   TopStore Explore Row - Mobile fixed on scroll support
   Desktop normal
   ===================================================== */

/* Desktop: normal */
@media (min-width: 769px) {
    .ts-showcase-head {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
    }
}

/* Mobile default: normal until JS fixes it */
@media (max-width: 768px) {
    .ts-showcase-head {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 10 !important;
        background: #fff !important;
    }

    .ts-showcase-head.ts-explore-mobile-fixed {
        position: fixed !important;
        top: var(--ts-explore-mobile-top, 0px) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;

        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 10px 12px !important;

        background: #fff !important;
        border-top: 3px solid #e5e7eb !important;
        border-bottom: 3px solid #d9dee7 !important;
        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .ts-explore-mobile-placeholder {
        display: none;
    }

    .ts-explore-mobile-placeholder.is-active {
        display: block;
    }
}


/* =====================================================
   Move Explore row closer to top BEFORE scroll only
   Sticky position remains correct when scrolling
   ===================================================== */

@media (max-width: 768px) {

    :root {
        --ts-explore-before-scroll-lift: -10px;
    }

    /* Move the Explore row upward before it becomes sticky */
    .ts-showcase-head:not(.ts-explore-mobile-fixed) {
        margin-top: var(--ts-explore-before-scroll-lift) !important;
        margin-bottom: 0 !important;
    }

    /* When sticky starts, reset position so it aligns properly */
    .ts-showcase-head.ts-explore-mobile-fixed {
        margin-top:0 !important;
        margin-bottom: 0 !important;
        top: 0 !important;
    }

    /* Reduce extra space around the whole showcase */
    .ts-showcase-wrap {
        padding-top: 10px !important;
        margin-top: 5px !important;
    }

    .ts-showcase-quick-search {
        margin-top: 0 !important;
    }
}
/* =====================================================
   Explore Services row - same border before and on scroll
   ===================================================== */

@media (max-width: 768px) {

    /* Before scroll */
    .ts-showcase-head {
        border-top: 0px solid #e5e7eb !important;
        border-bottom: 3px solid #d9dee7 !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    /* On scroll / fixed state */
    .ts-showcase-head.ts-explore-mobile-fixed {
        border-top: 2px solid #e5e7eb !important;
        border-bottom: 2px solid #d9dee7 !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
}





/* =========================================
   TopStore Services Hub - Experience cards fix
   Fixes card content overflowing on mobile
   ========================================= */

/* Section wrapper */
.ts-experience-wrap {
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Row / slider */
.ts-experience-track {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    padding: 6px 0 !important;
    box-sizing: border-box !important;
}

/* Hide scrollbar nicely */
.ts-experience-track::-webkit-scrollbar {
    display: none !important;
}
.ts-experience-track {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Each card */
.ts-experience-card {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-height: 220px !important;
    height: auto !important;

    background: #fdf6ee !important;
    border: 1px solid #f0c998 !important;
    border-radius: 24px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Top row inside card */
.ts-experience-card-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

/* Title */
.ts-experience-card-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    word-break: break-word !important;
}

/* Service/site name */
.ts-experience-card-name {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #b45309 !important;
    margin: 6px 0 12px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

/* Stars */
.ts-experience-card-stars {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #f59e0b !important;
}

/* Body text */
.ts-experience-card-text {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #334155 !important;
    margin: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Mobile fix */
@media (max-width: 768px) {
    .ts-experience-track {
        gap: 12px !important;
        padding: 4px 0 !important;
    }

    .ts-experience-card {
        flex: 0 0 76vw !important;
        width: 76vw !important;
        max-width: 76vw !important;
        min-height: 220px !important;
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .ts-experience-card-top {
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }

    .ts-experience-card-title {
        font-size: 17px !important;
    }

    .ts-experience-card-name {
        font-size: 14px !important;
    }

    .ts-experience-card-stars {
        font-size: 20px !important;
    }

    .ts-experience-card-text {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }
}


/* Hide search from showcase top area */
.ts-showcase-quick-search {
    display: none !important;
}


/* Show Services Hub search near category result rows */
.ts-services-wrap .ts-services-filter {
    display: grid !important;
}


/* =====================================================
   Services Hub Search - Near Category Rows
   ===================================================== */

.ts-services-wrap .ts-services-filter {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto 18px !important;
    padding: 14px !important;
    background: #fff !important;
    border-top: 3px solid #e5e7eb !important;
    border-bottom: 3px solid #e5e7eb !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
}

.ts-services-wrap .ts-services-filter input,
.ts-services-wrap .ts-services-filter select {
    height: 52px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 15px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    background: #fff !important;
}

.ts-services-wrap .ts-services-filter button {
    height: 52px !important;
    border-radius: 15px !important;
    background: #ff6a00 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    padding: 0 22px !important;
}

/* Mobile */
@media (max-width: 768px) {
    .ts-services-wrap .ts-services-filter {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        margin-bottom: 14px !important;
        padding: 12px 14px !important;

        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ts-services-wrap .ts-services-filter input {
        grid-column: 1 / -1 !important;
        height: 52px !important;
    }

    .ts-services-wrap .ts-services-filter select {
        height: 52px !important;
        font-size: 14px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ts-services-wrap .ts-services-filter button {
        grid-column: 1 / -1 !important;
        height: 52px !important;
        font-size: 14px !important;
    }
}


/* =====================================================
   Services Hub - Search/results normal spacing
   Removed negative lift that caused Sponsored Promo overlap.
   ===================================================== */

:root {
    --ts-services-results-lift: 0px !important;
}

.ts-services-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ts-services-wrap .ts-services-filter {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

.ts-services-category-rows-js {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ts-services-category-row-js:first-child {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    :root {
        --ts-services-results-lift: 0px !important;
    }

    .ts-services-wrap {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .ts-services-wrap .ts-services-filter {
        margin-bottom: 12px !important;
    }

    .ts-services-category-row-js {
        padding-top: 0 !important;
        border-top: 0 !important;
    }
}

/* =========================================================
   TopStore Services Hub
   Contained category sliders - no 100vw stretch
   ========================================================= */

.ts-category-row,
.ts-services-row {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.ts-category-cards-wrap,
.ts-category-slider-wrap,
.ts-services-row .swiper,
.ts-services-row .slick-slider {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
}

.ts-category-row-head,
.ts-category-row-title-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ts-services-row .slick-list,
.ts-services-row .slick-track,
.ts-services-row .swiper-wrapper,
.ts-services-row .swiper {
    overflow: hidden !important;
}

.ts-services-row .service-card,
.ts-services-row .ts-service-card,
.ts-category-cards-wrap .service-card {
    margin-right: 12px !important;
}

@media (max-width: 768px) {
    .ts-category-row,
    .ts-services-row {
        max-width: calc(100% - 20px) !important;
        width: calc(100% - 20px) !important;
    }

    .ts-category-row-head,
    .ts-category-row-title-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ts-category-cards-wrap,
    .ts-category-slider-wrap,
    .ts-services-row .swiper,
    .ts-services-row .slick-slider {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: auto !important;
    }
}

/* Keep Services Hub search inside the normal page container */
@media (max-width: 768px) {
    .ts-services-wrap .ts-services-filter {
        width: 100% !important;
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Strong mobile hide for Zambia / Fast Delivery / Secure Payments strip */
@media (max-width: 768px) {
    body .whb-header .whb-top-bar,
    body .whb-header .whb-header-top,
    body .whb-header .whb-row:first-child {
        display: none !important;
    }
}




/* =====================================================
   FINAL FIX: Category rows - one divider only
   Removes the top border/top padding from every category row.
   Keeps only one clean bottom divider.
   ===================================================== */
body .ts-services-wrap .ts-services-category-rows-js {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body .ts-services-wrap .ts-services-category-row-js {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 6px !important;
    border-top: 0 !important;
    border-bottom: 3px solid var(--ts-row-border, #e5e7eb) !important;
}

body .ts-services-wrap .ts-services-category-row-js:first-child {
    margin-top: 0 !important;
}

body .ts-services-wrap .ts-services-category-row-head-js {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
}

body .ts-services-wrap .ts-services-category-track-js {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 768px) {
    body .ts-services-wrap .ts-services-category-row-js {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
        padding-top: 0 !important;
        padding-bottom: 6px !important;
        border-top: 0 !important;
        border-bottom: 3px solid var(--ts-row-border, #e5e7eb) !important;
    }

    body .ts-services-wrap .ts-services-category-track-js {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* =====================================================
   FINAL FIX: Category rows - one divider only
   Removes top border/top padding from every category row.
   Keeps only one clean bottom divider.
   ===================================================== */

body .ts-services-wrap .ts-services-category-rows-js {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body .ts-services-wrap .ts-services-category-row-js {
    margin-top: 0 !important;
    margin-bottom: 18px !important;

    padding-top: 0 !important;
    padding-bottom: 6px !important;

    border-top: 0 !important;
    border-bottom: 3px solid var(--ts-row-border, #e5e7eb) !important;
}

body .ts-services-wrap .ts-services-category-row-js:first-child {
    margin-top: 0 !important;
}

body .ts-services-wrap .ts-services-category-row-head-js {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
}

body .ts-services-wrap .ts-services-category-track-js {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 768px) {
    body .ts-services-wrap .ts-services-category-row-js {
        margin-top: 0 !important;
        margin-bottom: 16px !important;

        padding-top: 0 !important;
        padding-bottom: 6px !important;

        border-top: 0 !important;
        border-bottom: 3px solid var(--ts-row-border, #e5e7eb) !important;
    }

    body .ts-services-wrap .ts-services-category-track-js {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}


/* =====================================================
   Popular Services - Full width white container
   Title + View all + cards inside one white box
   ===================================================== */

/* Main Popular Services wrapper */
.ts-popular-services,
.ts-popular-services-section,
.ts-popular-section,
.ts-services-popular,
.ts-popular-wrap {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 22px auto 28px !important;
    padding: 20px 18px 22px !important;
    background: #fff !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Title row should sit inside the white container */
.ts-popular-head,
.ts-popular-header,
.ts-popular-services-head,
.ts-popular-title-row {
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Remove separate white box from only the cards area */
.ts-popular-grid,
.ts-popular-services-grid,
.ts-popular-list,
.ts-popular-cards {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile: make Popular Services full screen width */
@media (max-width: 768px) {
    .ts-popular-services,
    .ts-popular-services-section,
    .ts-popular-section,
    .ts-services-popular,
    .ts-popular-wrap {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 22px 16px 24px !important;
        border-radius: 0 !important;
        background: #fff !important;
    }

    .ts-popular-head,
    .ts-popular-header,
    .ts-popular-services-head,
    .ts-popular-title-row {
        padding: 0 !important;
        margin-bottom: 18px !important;
    }

    .ts-popular-grid,
    .ts-popular-services-grid,
    .ts-popular-list,
    .ts-popular-cards {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }
}



/* ==========================================================
   TOPSTORE SERVICE HUB - CATEGORY VIEW ALL PAGE
   ========================================================== */

.ts-cat-view-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 10px 35px;
    box-sizing: border-box;
}

.ts-cat-view-header {
    background: linear-gradient(135deg, #0646a8, #0b75d1);
    color: #fff;
    padding: 18px 15px;
    border-radius: 18px;
    margin-bottom: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

.ts-cat-view-header h1 {
    margin: 8px 0 4px;
    font-size: 23px;
    font-weight: 800;
    color: #fff;
}

.ts-cat-view-header p {
    margin: 0;
    font-size: 14px;
    opacity: 0.92;
}

.ts-cat-view-back {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.16);
    color: #fff !important;
    text-decoration: none;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.ts-cat-view-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.ts-cat-view-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.ts-cat-view-img-wrap {
    width: 100%;
    height: 155px;
    background: #f1f5f9;
    overflow: hidden;
}

.ts-cat-view-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ts-cat-view-content {
    padding: 10px;
}

.ts-cat-view-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.ts-cat-view-verified,
.ts-cat-view-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.ts-cat-view-verified {
    background: #e8f5ff;
    color: #075cad;
}

.ts-cat-view-status {
    background: #ecfdf3;
    color: #087443;
}

.ts-cat-view-card h3 {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
}

.ts-cat-view-what {
    margin: 0 0 6px;
    font-size: 12px;
    color: #374151;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ts-cat-view-location {
    margin: 0 0 9px;
    font-size: 12px;
    color: #4b5563;
    font-weight: 700;
    line-height: 1.25;
}

.ts-cat-view-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.ts-cat-view-btn {
    min-height: 31px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 800;
    padding: 7px 8px;
    line-height: 1;
}

.ts-cat-view-details {
    grid-column: span 2;
    background: #0646a8;
    color: #fff !important;
}

.ts-cat-view-call {
    background: #f3f4f6;
    color: #111827 !important;
}

.ts-cat-view-wa {
    background: #e8fff0;
    color: #087443 !important;
}

.ts-cat-view-empty {
    background: #fff;
    border: 1px dashed rgba(0,0,0,0.18);
    padding: 18px;
    border-radius: 14px;
    text-align: center;
    font-size: 14px;
    color: #4b5563;
}

/* Tablet */
@media (max-width: 900px) {
    .ts-cat-view-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 600px) {
    .ts-cat-view-page {
        padding: 10px 7px 28px;
    }

    .ts-cat-view-header {
        border-radius: 15px;
        padding: 15px 12px;
        margin-bottom: 11px;
    }

    .ts-cat-view-header h1 {
        font-size: 20px;
    }

    .ts-cat-view-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .ts-cat-view-img-wrap {
        height: 118px;
    }

    .ts-cat-view-content {
        padding: 8px;
    }

    .ts-cat-view-card h3 {
        font-size: 13px;
    }

    .ts-cat-view-what,
    .ts-cat-view-location {
        font-size: 11px;
    }

    .ts-cat-view-btn {
        min-height: 29px;
        font-size: 11px;
        padding: 6px;
    }
}