/* Etusivun haku, ruudukot ja arvostelut: siirretty nykyisestä toteutuksesta */
/* ============================================
       MANUAALINEN HAKU - STYLES
       ============================================ */
    .tt-manuaalinen-haku {
        font-family: 'Poppins', sans-serif;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
    }
    
    .tt-haku-title {
        font-size: 42px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        margin: 0 0 24px 0;
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .tt-haku-filters {
        display: flex;
        gap: 16px;
        background: #fff;
        border-radius: 60px;
        padding: 10px 20px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    }
    
    .tt-haku-filter-group {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        position: relative;
        border-radius: 30px;
        padding: 4px 8px;
        margin: -4px 0;
        transition: background-color 0.2s ease;
    }
    
    /* Valittu tila - korostettu tausta */
    .tt-haku-filter-group.tt-has-selection {
        background-color: #EAF1FF;
    }
    
    .tt-haku-filter-group.tt-has-selection .tt-haku-select {
        color: #336fec;
        font-weight: 600;
    }
    
    .tt-haku-filter-icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFAC00;
    }
    
    .tt-haku-filter-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .tt-haku-select {
        flex: 1;
        min-width: 0;
        padding: 14px 40px 14px 0;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: #333;
        border: none;
        background: transparent;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 16px;
        /* Added for custom dropdown */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Piilota dropdown-nuoli kun on valittu (näytetään X sijaan) */
    .tt-haku-filter-group.tt-has-selection .tt-haku-select {
        background-image: none;
        padding-right: 8px;
    }
    
    .tt-haku-select:focus {
        outline: none;
    }
    
    .tt-haku-select option {
        font-family: 'Poppins', sans-serif;
        padding: 10px;
    }

    /* ============================================
       CUSTOM SEARCHABLE DROPDOWN STYLES
       ============================================ */
    .tt-custom-select-wrapper {
        position: relative;
        flex: 1;
        min-width: 0;
    }
    
    .tt-custom-select-trigger {
        width: 100%;
        text-align: left;
    }

    /* Trigger on oikea tekstikenttä johon kirjoitetaan suoraan.
       !important-säännöt kumoavat teeman yleiset input-tyylit (reunus,
       tausta, varjo) jotta kenttä näyttää samalta kuin vanha teksti. */
    input.tt-custom-select-trigger {
        cursor: pointer;
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        outline: none !important;
        height: auto !important;
        line-height: inherit !important;
    }

    input.tt-custom-select-trigger:focus {
        cursor: text;
    }

    /* Placeholder samannäköinen kuin vanha trigger-teksti */
    input.tt-custom-select-trigger::placeholder {
        color: #333;
        opacity: 1;
        font-weight: 500;
    }
    
    .tt-custom-select-dropdown {
        position: absolute;
        /* Aukeaa kentän alle: kirjoitus tapahtuu suoraan itse kenttään
           (erillinen Hae-laatikko poistettu), joten kenttä ikoneineen ja
           nuolineen pysyy koko ajan näkyvissä. */
        top: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        min-width: 285px;
        max-width: min(100%, calc(100vw - 24px));
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        z-index: 100;
        display: none;
        flex-direction: column;
        border: 1px solid #eee;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .tt-custom-select-dropdown.tt-is-open {
        display: flex;
    }
    
    .tt-custom-select-search-wrap {
        padding: 12px;
        border-bottom: 1px solid #eee;
        position: relative;
    }
    
    .tt-custom-select-search {
        width: 100%;
        padding: 10px 14px 10px 46px !important;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
        outline: none;
        box-sizing: border-box;
    }
    
    .tt-custom-select-search:focus {
        border-color: #336fec;
    }
    
    .tt-custom-select-search-icon {
        position: absolute;
        left: 28px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        width: 18px;
        height: 18px;
        pointer-events: none;
    }
    
    .tt-custom-select-options {
        max-height: 350px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px 0;
    }

    .tt-custom-select-top-label {
        padding: 6px 20px 2px;
        font-family: 'Poppins', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: #999;
    }

    .tt-custom-select-top-divider {
        border-bottom: 1px solid #eee;
        margin: 6px 0;
    }

    .tt-custom-select-option {
        padding: 10px 20px;
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
        cursor: pointer;
        color: #333;
        transition: background-color 0.1s;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .tt-custom-select-option:hover {
        background-color: #f5f8ff;
    }
    
    .tt-custom-select-option.tt-is-selected {
        background-color: #eaf1ff;
        color: #336fec;
        font-weight: 600;
    }
    
    .tt-custom-select-option.tt-is-hidden {
        display: none;
    }
    
    .tt-custom-select-no-results {
        padding: 12px 20px;
        color: #999;
        font-size: 14px;
        text-align: center;
        display: none;
    }
    
    /* Clear/X-nappi */
    .tt-haku-clear {
        flex-shrink: 0;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        /* display asetetaan JS:llä - ei !important tässä */
        align-items: center !important;
        justify-content: center !important;
        background: #336fec !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        padding: 0 !important;
        color: #fff !important;
        transition: all 0.2s ease;
        margin-right: 4px;
        margin-left: auto;
    }
    
    /* Näytetään vain kun on valinta */
    .tt-haku-filter-group.tt-has-selection .tt-haku-clear {
        display: flex !important;
    }
    
    /* Piilotetaan oletuksena */
    .tt-haku-filter-group:not(.tt-has-selection) .tt-haku-clear {
        display: none !important;
    }
    
    .tt-haku-clear:hover {
        background: #1a54c9 !important;
        transform: scale(1.1);
    }
    
    .tt-haku-clear svg {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        stroke: #fff !important;
        display: block !important;
    }
    
    .tt-haku-clear svg line {
        stroke: #fff !important;
        stroke-width: 2.5 !important;
    }
    
    /* ============================================
       READONLY STATE (paikkakuntasivut)
       ============================================ */
    .tt-haku-readonly .tt-haku-filter-group.tt-haku-readonly-filter {
        cursor: default;
    }
    
    /* Piilota tyhjät filter-ryhmät readonly-tilassa */
    .tt-haku-readonly .tt-haku-filter-group.tt-haku-readonly-filter:not(.tt-has-selection) {
        display: none;
    }
    
    /* Jos vain yksi filter näkyy, poista border */
    .tt-haku-readonly .tt-haku-filter-group.tt-haku-readonly-filter.tt-has-selection:first-child:last-child,
    .tt-haku-readonly .tt-haku-filter-group.tt-haku-readonly-filter.tt-has-selection:only-child {
        border-right: none;
        padding-right: 8px;
    }
    
    /* Jos toinen on piilotettu, poista border ensimmäiseltä */
    .tt-haku-readonly .tt-haku-filter-group.tt-haku-readonly-filter:first-child:has(+ .tt-haku-readonly-filter:not(.tt-has-selection)) {
        border-right: none;
    }
    
    .tt-haku-readonly-value {
        flex: 1;
        min-width: 0;
        padding: 14px 8px 14px 0;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: #336fec;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Readonly tilassa aina korostettu tausta */
    .tt-haku-readonly .tt-haku-filter-group.tt-has-selection {
        background-color: #EAF1FF;
    }
    
    /* Vasen/oikea jako visuaalisesti */
    .tt-haku-filter-group:first-child {
        border-right: 1px solid #eee;
        padding-right: 16px;
    }
    
    /* Kun nappi on mukana */
    .tt-haku-filters.tt-haku-with-button .tt-haku-filter-group:nth-child(2) {
        border-right: 1px solid #eee;
        padding-right: 16px;
    }
    
    /* Näytä tekijät -nappi */
    .tt-haku-button-group {
        flex-shrink: 0;
        padding-left: 8px;
    }
    
    .tt-haku-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #336fec;
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 600;
        padding: 14px 32px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    
    .tt-haku-button:hover {
        background: #2858c7;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(51, 111, 236, 0.35);
    }
    
    .tt-haku-button:active {
        transform: translateY(0);
    }
    
    /* ============================================
       INITIAL LOADING STATE - Piilota grid kunnes AJAX valmistuu
       Käytetään MPG-sivuilla jotta väärät tulokset eivät näy hetkellisesti
       ============================================ */
    .tt-initial-loading {
        min-height: 400px;
        position: relative;
    }
    
    .tt-initial-loading > * {
        visibility: hidden !important;
    }
    
    .tt-initial-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border: 3px solid #e0e0e0;
        border-top-color: #336fec;
        border-radius: 50%;
        animation: tt-spinner 0.8s linear infinite;
    }
    
    @keyframes tt-spinner {
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }
    
    /* ============================================
       LOADING STATE - Smooth transitions without white flash
       ============================================ */
    .tt-loading {
        position: relative;
        pointer-events: none;
    }
    
    /* Vanhat kortit haalistuvat pehmeästi loading-tilassa */
    /* Kaikki grid-tyypit: tekijat, paikkakunta, etusivu */
    .tt-tekijat-grid-wrapper.tt-loading .tt-card,
    .tt-paikkakunta-grid-wrapper.tt-loading .tt-card,
    .tt-etusivu-grid-wrapper.tt-loading .tt-card,
    .tt-loading .jet-listing-grid__item {
        opacity: 0.4;
        transform: scale(0.98);
        transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    }
    
    /* JetEngine grid loading */
    .jet-listing-grid__items.tt-loading {
        min-height: 200px;
    }
    
    .jet-listing-grid__items.tt-loading > * {
        opacity: 0.4;
        transform: scale(0.98);
        transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    }
    
    /* ============================================
       CARD FADE-IN ANIMATION - Uudet kortit ilmestyvät pehmeästi
       ============================================ */
    @keyframes tt-card-fade-in {
        0% {
            opacity: 0;
            transform: translateY(8px) scale(0.98);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    /* Uudet kortit (AJAX-latauksen jälkeen) fade in */
    .tt-card.tt-card-new,
    .jet-listing-grid__item.tt-card-new {
        animation: tt-card-fade-in 0.35s ease-out forwards;
    }
    
    /* Staggered animation - jokainen kortti tulee hieman eri aikaan */
    .tt-card.tt-card-new:nth-child(1) { animation-delay: 0ms; }
    .tt-card.tt-card-new:nth-child(2) { animation-delay: 50ms; }
    .tt-card.tt-card-new:nth-child(3) { animation-delay: 100ms; }
    .tt-card.tt-card-new:nth-child(4) { animation-delay: 150ms; }
    .tt-card.tt-card-new:nth-child(5) { animation-delay: 200ms; }
    .tt-card.tt-card-new:nth-child(6) { animation-delay: 250ms; }
    .tt-card.tt-card-new:nth-child(7) { animation-delay: 300ms; }
    .tt-card.tt-card-new:nth-child(8) { animation-delay: 350ms; }
    
    .jet-listing-grid__item.tt-card-new:nth-child(1) { animation-delay: 0ms; }
    .jet-listing-grid__item.tt-card-new:nth-child(2) { animation-delay: 50ms; }
    .jet-listing-grid__item.tt-card-new:nth-child(3) { animation-delay: 100ms; }
    .jet-listing-grid__item.tt-card-new:nth-child(4) { animation-delay: 150ms; }
    .jet-listing-grid__item.tt-card-new:nth-child(5) { animation-delay: 200ms; }
    .jet-listing-grid__item.tt-card-new:nth-child(6) { animation-delay: 250ms; }
    .jet-listing-grid__item.tt-card-new:nth-child(7) { animation-delay: 300ms; }
    .jet-listing-grid__item.tt-card-new:nth-child(8) { animation-delay: 350ms; }
    
    /* ============================================
       JETENGINE GRID LAYOUT FIX
       ============================================ */
    /* 
     * HUOM: Tämä CSS korjaa JetEngine listing gridin näyttämään 2 saraketta.
     * Jos layout ei toimi, tarkista Elementor-editorista että:
     * 1. Listing grid widget on omassa containerissaan
     * 2. Container width = 100%
     * 3. Pagination widget on ALLE gridin (ei vieressä flex-containerissa)
     */
    
    /* Parent container fix - ensure full width block layout */
    .jet-listing-grid,
    .elementor-widget-jet-listing-grid,
    .elementor-jet-listing-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix for Elementor widget container */
    .elementor-widget-jet-listing-grid > .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Main grid container - CRITICAL FIX */
    .jet-listing-grid__items {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
        flex: none !important;
        columns: unset !important;
    }
    
    @media (max-width: 900px) {
        .jet-listing-grid__items {
            grid-template-columns: 1fr !important;
            gap: 16px !important;
        }
    }
    
    /* Individual grid items */
    .jet-listing-grid__item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    
    /* Override JetEngine inline styles */
    .jet-listing-grid__item[style] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    
    /* Pagination styling - ensure it's below grid */
    .jet-filters-pagination,
    .jet-smart-filters-pagination,
    nav.jet-filters-pagination {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin-top: 24px !important;
    }
    
    /* CRITICAL: Fix for Elementor container that puts grid and pagination side by side */
    /* This targets the Elementor section/container that holds both */
    .elementor-section:has(.jet-listing-grid) .elementor-container,
    .elementor-container:has(.jet-listing-grid),
    .e-con:has(.jet-listing-grid) {
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }
    
    .elementor-section:has(.jet-listing-grid) .elementor-container > .elementor-column,
    .elementor-section:has(.jet-listing-grid) .elementor-container > .elementor-widget-wrap,
    .e-con:has(.jet-listing-grid) > .e-con-inner,
    .e-con:has(.jet-listing-grid) > .elementor-widget {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Force grid widget to take full width in Elementor */
    .elementor-widget-jet-listing-grid,
    .elementor-widget-jet-smart-filters-pagination {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* ============================================
       PROFIILIKORTTI STYLES (JetEngine listing items)
       ============================================ */
    .jet-listing-grid__item .tt-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.12);
        padding: 24px;
        transition: transform 0.2s, box-shadow 0.2s;
        overflow: hidden;
        max-width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid rgba(0,0,0,0.03);
        position: relative;
        font-family: 'Poppins', sans-serif;
    }
    
    .jet-listing-grid__item .tt-card.tt-card-pro {
        background: #fcf6ec;
    }
    
    .jet-listing-grid__item .tt-card:hover {
        background: #eaf1ff;
    }
    
    .jet-listing-grid__item .tt-card-overlay-link {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1;
    }
    
    .jet-listing-grid__item .tt-card-content {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        flex-grow: 1;
    }
    
    .jet-listing-grid__item .tt-card-left {
        flex-shrink: 0;
        width: 108px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .jet-listing-grid__item .tt-card-image-link {
        display: block;
        width: 108px;
        height: 108px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }
    
    .jet-listing-grid__item .tt-card-image {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        object-position: center 35% !important;
        position: absolute;
        top: 0; left: 0;
    }
    
    .jet-listing-grid__item .tt-card-image-placeholder {
        width: 108px;
        height: 108px;
        border-radius: 50%;
        background: #e8e8e8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        color: #999;
        font-weight: 600;
    }
    
    .jet-listing-grid__item .tt-card-badge {
        margin-top: 10px;
    }
    
    .jet-listing-grid__item .tt-card-badge img {
        width: 78px;
        height: auto;
    }
    
    .jet-listing-grid__item .tt-card-right {
        flex-grow: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    
    .jet-listing-grid__item .tt-card-jobs {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 4px;
        line-height: 1.4;
    }
    
    .jet-listing-grid__item .tt-job-name {
        color: #5778eb;
        position: relative;
        z-index: 2;
    }
    
    .jet-listing-grid__item .tt-job-comma {
        color: #000;
        margin-right: 3px;
    }
    
    .jet-listing-grid__item .tt-card-name {
        margin: 0 0 4px 0;
        font-size: 26px !important;
        font-weight: 600;
        line-height: 1.2;
        color: #34383d;
    }
    
    .jet-listing-grid__item .tt-card-price {
        color: #ffac00;
        font-weight: 500;
        font-size: 20px;
        margin-bottom: 8px;
        display: flex;
        align-items: baseline;
    }
    
    .jet-listing-grid__item .tt-price-tax {
        font-size: 13px;
        font-weight: 400;
        margin-left: 4px;
    }
    
    .jet-listing-grid__item .tt-card-desc {
        --tt-fade-line-h: 1.5em;
        font-size: 16px;
        color: #4a4a4a;
        line-height: 1.5;
        margin-bottom: 16px;
        flex-grow: 1;
        /* Rajaa max 2 riviin. Fade-efekti VAIN 2. rivillä:
           1. rivi (ylä-mask) on täysin opaque, 2. rivi (ala-mask) faderaa
           oikealta. Maskit yhdistyvät (default mask-composite: add) -
           1-rivinen teksti pysyy täysin näkyvänä koska maskit overlappaavat. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: calc(var(--tt-fade-line-h) * 2);
        -webkit-mask-image:
            linear-gradient(#000, #000),
            linear-gradient(to right, #000 calc(100% - 60px), transparent);
        mask-image:
            linear-gradient(#000, #000),
            linear-gradient(to right, #000 calc(100% - 60px), transparent);
        -webkit-mask-size: 100% var(--tt-fade-line-h), 100% var(--tt-fade-line-h);
        mask-size: 100% var(--tt-fade-line-h), 100% var(--tt-fade-line-h);
        -webkit-mask-position: top left, bottom left;
        mask-position: top left, bottom left;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    
    .jet-listing-grid__item .tt-card-btn-wrap {
        margin-top: auto;
    }
    
    .jet-listing-grid__item .tt-card-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #ECF4FF !important;
        color: #336fec !important;
        font-weight: 600;
        font-size: 16px;
        padding: 10px 24px;
        border-radius: 100px;
        text-decoration: none !important;
        transition: all 0.2s;
        position: relative;
        z-index: 2;
    }
    
    .jet-listing-grid__item .tt-card-btn:hover {
        background-color: #dbe9ff !important;
        color: #1a54c9 !important;
    }
    
    /* JetEngine mobile */
    @media (max-width: 900px) {
        .jet-listing-grid__item .tt-card {
            padding: 20px;
        }
        
        .jet-listing-grid__item .tt-card-content {
            gap: 14px;
        }
        
        .jet-listing-grid__item .tt-card-left {
            width: 70px !important;
        }
        
        .jet-listing-grid__item .tt-card-image-link {
            width: 70px !important;
            height: 70px !important;
        }
        
        .jet-listing-grid__item .tt-card-image-placeholder {
            width: 70px !important;
            height: 70px !important;
            font-size: 24px;
        }
        
        .jet-listing-grid__item .tt-card-badge img {
            width: 58px;
        }
        
        .jet-listing-grid__item .tt-card-jobs {
            font-size: 14px;
        }
        
        .jet-listing-grid__item .tt-card-name {
            font-size: 20px !important;
        }
        
        .jet-listing-grid__item .tt-card-price {
            font-size: 16px;
        }
        
        .jet-listing-grid__item .tt-card-desc {
            font-size: 14px;
            margin-bottom: 0;
        }
        
        .jet-listing-grid__item .tt-card-btn-wrap {
            padding-top: 12px;
        }
        
        .jet-listing-grid__item .tt-card-btn {
            font-size: 14px;
            width: 100%;
        }
    }
    
    /* ============================================
       MOBILE STYLES
       ============================================ */
    @media (max-width: 768px) {
        .tt-haku-title {
            font-size: 28px;
            margin-bottom: 16px;
        }
        
        .tt-haku-filters {
            flex-direction: column;
            gap: 0;
            border-radius: 20px;
            padding: 8px 16px;
        }
        
        .tt-haku-filter-group {
            padding: 8px 4px;
            margin: 0;
            border-radius: 12px;
        }
        
        .tt-haku-filter-group.tt-has-selection {
            margin: 4px -4px;
            padding: 8px 8px;
        }
        
        .tt-haku-filter-group:first-child {
            border-right: none;
            border-bottom: 1px solid #eee;
            padding-right: 4px;
            padding-bottom: 12px;
        }
        
        .tt-haku-filter-group:first-child.tt-has-selection {
            margin-bottom: 8px;
        }
        
        .tt-haku-filters:not(.tt-haku-with-button) .tt-haku-filter-group:last-child {
            padding-top: 12px;
        }
        
        /* Kun nappi on mukana mobiilissa */
        .tt-haku-filters.tt-haku-with-button .tt-haku-filter-group:nth-child(2) {
            border-right: none;
            border-bottom: 1px solid #eee;
            padding-right: 4px;
            padding-bottom: 12px;
        }
        
        .tt-haku-button-group {
            padding: 16px 0 8px 0;
            width: 100%;
        }
        
        .tt-haku-button {
            width: 100%;
            padding: 14px 24px;
            font-size: 15px;
        }
        
        .tt-haku-filter-icon {
            width: 32px;
            height: 32px;
        }
        
        .tt-haku-filter-icon svg {
            width: 18px;
            height: 18px;
        }
        
        .tt-haku-select {
            font-size: 15px;
            padding: 10px 36px 10px 0;
        }
        
        .tt-haku-filter-group.tt-has-selection .tt-haku-select {
            padding-right: 4px;
        }
        
        .tt-haku-clear {
            width: 26px !important;
            height: 26px !important;
            min-width: 26px !important;
            min-height: 26px !important;
            max-width: 26px !important;
            max-height: 26px !important;
        }
        
        .tt-haku-clear svg {
            width: 12px !important;
            height: 12px !important;
            min-width: 12px !important;
            min-height: 12px !important;
        }
        
        .tt-haku-readonly-value {
            font-size: 15px;
            padding: 10px 4px 10px 0;
        }
    }

/* ============================================
       GRID WRAPPER (tekijatori_tekijat_grid)
       ============================================ */
    .tt-tekijat-grid-wrapper {
        margin: 0 auto;
        max-width: 1200px;
        padding: 0 40px 40px;
        overflow: visible;
        font-family: 'Poppins', sans-serif;
    }
    
    .tt-tekijat-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 30px;
        padding: 20px 0;
    }
    
    @media (max-width: 900px) {
        .tt-tekijat-grid {
            grid-template-columns: 1fr;
        }
    }
    
    /* ============================================
       JETENGINE LISTING ITEM EQUAL HEIGHT
       (tekijatori_profiilikortti)
       ============================================ */
    .jet-listing-grid__item,
    .elementor-loop-container > div,
    .jet-listing-grid .jet-listing-grid__item {
        display: flex;
        flex-direction: column;
    }
    
    .jet-listing-grid__item > .elementor,
    .jet-listing-grid__item > .elementor > .elementor-inner,
    .jet-listing-grid__item > .elementor > .elementor-inner > .elementor-section-wrap,
    .jet-listing-grid__item .elementor-widget-wrap,
    .jet-listing-grid__item .elementor-widget-container {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .jet-listing-grid__item .elementor-section,
    .jet-listing-grid__item .elementor-container,
    .jet-listing-grid__item .elementor-column,
    .jet-listing-grid__item .elementor-column-wrap,
    .jet-listing-grid__item .elementor-widget {
        height: 100%;
        flex-grow: 1;
    }

    /* Varmista, että shortcode-kontaineri venyy koko korkeuteen */
    .jet-listing-grid__item .elementor-widget-container,
    .jet-listing-grid__item .elementor-widget-container > .elementor-shortcode,
    .jet-listing-grid__item .elementor-widget-container > .elementor-shortcode > div {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    /* ============================================
       CARD - PERUS (Grid-konteksti, oma laatikko)
       ============================================ */
    .tt-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.18);
        padding: 24px;
        transition: transform 0.2s, box-shadow 0.2s;
        overflow: hidden;
        max-width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid rgba(0,0,0,0.03);
        position: relative;
        z-index: 0;
    }
    
    /* Koko kortti klikattavaksi - overlay-linkki */
    .tt-card-overlay-link {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
    
    /* Varmista että kortilla on position:relative overlay:ta varten */
    .tt-card {
        position: relative;
    }
    
    /* Linkit ja napit overlay:n päällä - klikattavissa erikseen */
    .tt-card-image-link,
    .tt-card-btn,
    .tt-job-name {
        position: relative;
        z-index: 2;
    }
    
    .tt-card.tt-card-pro {
        background: #fcf6ec;
        border: none;
    }
    
    .tt-card:hover {
        background: #eaf1ff;
    }
    
    .tt-card.tt-card-pro:hover {
        background: #eaf1ff;
    }
    
    /* ============================================
       CARD - LISTING ITEM (JetEngine Listing Itemin sisällä)
       Palautetaan vakiotyylit jotta etusivun kortit näyttävät
       samalta kuin tekijät-sivulla (reunat, varjot, taustat)
       ============================================ */
    .tt-card.tt-card-listing-item {
        /* Ei ylikirjoiteta tyylejä, käytetään .tt-card oletuksia */
    }
    
    .tt-card.tt-card-listing-item:hover {
        /* Ei ylikirjoiteta hoveria */
    }
    
    /* ============================================
       CARD CONTENT (yhteinen)
       ============================================ */
    .tt-card-content {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        flex-grow: 1;
        height: 100%;
    }
    
    /* Left Side */
    .tt-card-left {
        flex-shrink: 0;
        width: 108px;
        min-width: 108px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .tt-card-image-link {
        display: block;
        width: 108px;
        height: 108px;
        min-width: 108px;
        min-height: 108px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
    }
    
    .tt-card-image {
        width: 100% !important;
        height: 100% !important;
        min-width: 108px;
        min-height: 108px;
        border-radius: 50% !important;
        object-fit: cover !important;
        object-position: center 35% !important;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .tt-card-image-placeholder {
        width: 108px;
        height: 108px;
        min-width: 108px;
        min-height: 108px;
        border-radius: 50%;
        background: #e8e8e8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        color: #999;
        font-weight: 600;
    }
    
    .tt-card-badge {
        margin-top: 10px;
    }
    
    .tt-card-badge img {
        width: 78px;
        height: auto;
        display: block;
    }
    
    /* Right Side - flex-grow pushes button to bottom */
    .tt-card-right {
        flex-grow: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
    }
    
    .tt-card-jobs {
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 4px;
        word-break: break-word;
        overflow-wrap: break-word;
        line-height: 1.4;
    }
    
    .tt-job-name {
        color: #5778eb;
    }
    
    .tt-job-comma {
        color: #000000;
        margin-right: 3px;
    }
    
    .tt-card-name {
        margin: 0 0 4px 0;
        font-family: 'Poppins', sans-serif;
        font-size: 26px !important;
        font-weight: 600;
        line-height: 1.2;
        word-break: break-word;
        overflow-wrap: break-word;
        color: #34383d;
    }
    
    .tt-card-price {
        color: #ffac00;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        font-size: 20px;
        margin-bottom: 8px;
        display: flex;
        align-items: baseline;
    }
    
    .tt-price-tax {
        font-size: 13px;
        color: #ffac00;
        font-weight: 400;
        margin-left: 4px;
    }
    
    .tt-card-desc {
        --tt-fade-line-h: 1.5em;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: #4a4a4a;
        line-height: 1.5;
        margin-bottom: 16px;
        word-break: break-word;
        flex-grow: 1;
        /* Rajaa max 2 riviin. Fade-efekti VAIN 2. rivillä:
           1. rivi (ylä-mask) on täysin opaque, 2. rivi (ala-mask) faderaa
           oikealta. Maskit yhdistyvät (default mask-composite: add) -
           1-rivinen teksti pysyy täysin näkyvänä koska maskit overlappaavat. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: calc(var(--tt-fade-line-h) * 2);
        -webkit-mask-image:
            linear-gradient(#000, #000),
            linear-gradient(to right, #000 calc(100% - 60px), transparent);
        mask-image:
            linear-gradient(#000, #000),
            linear-gradient(to right, #000 calc(100% - 60px), transparent);
        -webkit-mask-size: 100% var(--tt-fade-line-h), 100% var(--tt-fade-line-h);
        mask-size: 100% var(--tt-fade-line-h), 100% var(--tt-fade-line-h);
        -webkit-mask-position: top left, bottom left;
        mask-position: top left, bottom left;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    
    .tt-card-btn-wrap {
        margin-top: auto;
        padding-top: 0;
    }
    
    .tt-card-btn,
    a.tt-card-btn,
    .tt-card a.tt-card-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #ECF4FF !important;
        color: #336fec !important;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 16px;
        padding: 10px 24px;
        border-radius: 100px;
        border: none;
        text-decoration: none !important;
        transition: all 0.2s;
        width: auto;
    }
    
    .tt-card-btn:hover,
    a.tt-card-btn:hover,
    .tt-card a.tt-card-btn:hover {
        background-color: #dbe9ff !important;
        color: #1a54c9 !important;
        transform: translateY(-1px);
    }
    
    /* ============================================
       MOBILE STYLES
       ============================================ */
    @media (max-width: 900px) {
        .tt-tekijat-grid-wrapper,
        .tt-etusivu-grid-wrapper {
            padding-left: 24px !important;
            padding-right: 24px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box;
            max-width: 100vw;
            width: 100%;
        }
        
        /* Yhtenäinen margin/padding kaikille grideille mobiilissa */
        .tt-tekijat-grid,
        .tt-etusivu-grid {
            max-width: 100%;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding: 12px 0; /* Vain top/bottom padding */
        }

        /* Tekijät-sivulla hieman tiiviimpi gap mobiilissa */
        .tt-tekijat-grid {
            gap: 16px;
        }

        /* Etusivushortcodeissa pienempi pystyrako korttien väliin (~30%) */
        .tt-etusivu-grid {
            row-gap: 11px;
        }
        
        /* Kaikki kortit mobiilissa */
        .tt-card {
            padding: 20px;
            max-width: 100%;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.16);
            border-radius: 12px;
        }
        
        /* Mobile: overlay-linkki jo määritelty ylempänä, ei tarvitse toistaa */
        
        /* Listing-item kortti mobiilissa (Elementor hoitaa taustan) */
        .tt-card.tt-card-listing-item {
            /* Käytetään vakio paddingia (16px) ja reunoja */
        }
        
        /* Listing-item kortit (etusivu): ei tarvitse overlay-linkkiä koska ne ovat jo JetEngine-listauksessa */
        .tt-card.tt-card-listing-item .tt-card-overlay-link {
            display: none;
        }
        
        .tt-card-content {
            gap: 14px;
            max-width: 100%;
        }
        
        .tt-card-left {
            width: 70px !important;
            min-width: 70px !important;
        }
        
        .tt-card-image-link {
            width: 70px !important;
            height: 70px !important;
            min-width: 70px !important;
            min-height: 70px !important;
        }
        
        .tt-card-image {
            min-width: 70px !important;
            min-height: 70px !important;
        }
        
        .tt-card-image-placeholder {
            width: 70px !important;
            height: 70px !important;
            min-width: 70px !important;
            min-height: 70px !important;
            font-size: 24px;
        }
        
        .tt-card-badge img {
            width: 58px;
        }
        
        .tt-card-badge {
            margin-top: 6px;
        }
        
        .tt-card-jobs {
            font-size: 14px;
            margin-bottom: 3px;
        }
        
        .tt-card-name {
            font-size: 20px !important;
            margin-bottom: 3px;
        }
        
        .tt-card-price {
            font-size: 16px;
            margin-bottom: 4px;
        }
        
        .tt-price-tax {
            font-size: 13px;
        }
        
        .tt-card-desc {
            font-size: 14px;
            margin-bottom: 0;
        }
        
        .tt-card-btn-wrap {
            padding-top: 12px;
        }
        
        .tt-card-btn,
        a.tt-card-btn,
        .tt-card a.tt-card-btn {
            font-size: 14px;
            padding: 10px 24px;
            width: 100%;
            box-sizing: border-box;
        }
        
        /* Pagination mobile */
        .tt-pagination {
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            row-gap: 10px;
        }
        
        .tt-page-item {
            min-width: 40px;
            height: 40px;
            padding: 0 12px;
            font-size: 14px;
            order: 1;
        }
        
        .tt-page-item.prev,
        .tt-page-item.next {
            order: 2;
            width: calc(50% - 4px);
            justify-content: center;
        }
        
        .tt-page-dots {
            order: 1;
        }
    }
    
    /* ============================================
       PAGINATION
       ============================================ */
    .tt-pagination {
        display: flex;
        justify-content: center;
        gap: 6px;
        flex-wrap: wrap;
        width: 100%;
        margin: 20px auto 0;
        text-align: center;
    }
    
    .tt-page-item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
        color: #555;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .tt-page-item:hover {
        border-color: #1e73be;
        color: #1e73be;
    }
    
    .tt-page-item.current {
        background: #1e73be;
        border-color: #1e73be;
        color: #fff;
        cursor: default;
    }
    
    .tt-page-dots {
        display: flex;
        align-items: center;
        color: #999;
    }
    
    .tt-no-results {
        grid-column: 1 / -1;
        background: #fff;
        padding: 40px;
        text-align: center;
        border-radius: 12px;
        color: #666;
    }

/* ============================================
       ETUSIVU GRID
       ============================================ */
    .tt-etusivu-grid-wrapper {
        margin: 0 auto;
        max-width: 1200px;
        padding: 0 40px 40px;
        font-family: 'Poppins', sans-serif;
    }
    
    .tt-etusivu-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 24px;
        row-gap: 17px;
        margin-bottom: 30px;
        padding: 20px 0;
    }
    
    @media (max-width: 900px) {
        .tt-etusivu-grid {
            grid-template-columns: 1fr;
        }
        
        .tt-etusivu-grid-wrapper {
            padding: 0 24px 30px;
        }
    }
    
    /* Näytä kaikki -nappi */
    .tt-etusivu-button-wrap {
        text-align: center;
        margin-top: 10px;
    }
    
    .tt-etusivu-button,
    a.tt-etusivu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #336fec;
        color: #fff !important;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 600;
        padding: 14px 40px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none !important;
    }
    
    .tt-etusivu-button:hover,
    a.tt-etusivu-button:hover {
        background: #2858c7;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(51, 111, 236, 0.35);
        color: #fff !important;
    }
    
    /* Loading state etusivulle - Smooth transitions without white flash */
    .tt-etusivu-grid-wrapper.tt-loading .tt-etusivu-grid {
        position: relative;
        pointer-events: none;
    }
    
    /* Vanhat kortit haalistuvat pehmeästi, ei valkoista overlayta */
    .tt-etusivu-grid-wrapper.tt-loading .tt-card {
        opacity: 0.4;
        transform: scale(0.98);
        transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    }
    
    /* ============================================
       CARD FADE-IN ANIMATION - Uudet kortit ilmestyvät pehmeästi
       ============================================ */
    @keyframes tt-card-fade-in {
        0% {
            opacity: 0;
            transform: translateY(8px) scale(0.98);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    /* Uudet kortit (AJAX-latauksen jälkeen) fade in */
    .tt-etusivu-grid .tt-card.tt-card-new,
    .tt-paikkakunta-grid .tt-card.tt-card-new {
        animation: tt-card-fade-in 0.35s ease-out forwards;
    }
    
    /* Staggered animation - jokainen kortti tulee hieman eri aikaan */
    .tt-etusivu-grid .tt-card.tt-card-new:nth-child(1),
    .tt-paikkakunta-grid .tt-card.tt-card-new:nth-child(1) { animation-delay: 0ms; }
    .tt-etusivu-grid .tt-card.tt-card-new:nth-child(2),
    .tt-paikkakunta-grid .tt-card.tt-card-new:nth-child(2) { animation-delay: 50ms; }
    .tt-etusivu-grid .tt-card.tt-card-new:nth-child(3),
    .tt-paikkakunta-grid .tt-card.tt-card-new:nth-child(3) { animation-delay: 100ms; }
    .tt-etusivu-grid .tt-card.tt-card-new:nth-child(4),
    .tt-paikkakunta-grid .tt-card.tt-card-new:nth-child(4) { animation-delay: 150ms; }
    .tt-paikkakunta-grid .tt-card.tt-card-new:nth-child(5) { animation-delay: 200ms; }
    .tt-paikkakunta-grid .tt-card.tt-card-new:nth-child(6) { animation-delay: 250ms; }
    .tt-paikkakunta-grid .tt-card.tt-card-new:nth-child(7) { animation-delay: 300ms; }
    .tt-paikkakunta-grid .tt-card.tt-card-new:nth-child(8) { animation-delay: 350ms; }

.tt-reviews {

            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

        }

        .tt-rv-title {

            font-size: 26px;

            font-weight: 600;

            line-height: 1.25;

            margin: 0 0 6px;

        }

        .tt-rv-sub {

            font-size: 15px;

            margin: 0 0 18px;

        }

        .tt-rv-stars {

            position: relative;

            display: inline-block;

            line-height: 1;

            letter-spacing: 3px;

        }

        .tt-rv-stars-bg { color: #e3e5ea; }

        .tt-rv-stars-fill {

            position: absolute;

            left: 0;

            top: 0;

            overflow: hidden;

            white-space: nowrap;

        }

        .tt-rv-sumcard {

            display: inline-flex;

            align-items: center;

            gap: 14px;

            border-radius: 14px;

            padding: 18px 28px;

            box-shadow: 0 2px 10px rgba(20, 25, 40, 0.07);

        }

        .tt-rv-avg { font-weight: 700; line-height: 1; }

        .tt-rv-count { font-size: 15px; }



        /* Teeman globaalit nappityylit eivät saa muotoilla widgetin omia nappeja. */

        .tt-reviews .tt-rv-arrow,

        .tt-reviews .tt-rv-more {

            -webkit-appearance: none !important;

            appearance: none !important;

            box-shadow: none !important;

            text-transform: none !important;

            letter-spacing: normal !important;

            text-shadow: none !important;

            min-width: 0 !important;

            min-height: 0 !important;

            outline: none;

        }



        .tt-rv-carousel { position: relative; margin-top: 22px; padding: 0 54px; }

        /* Pystysuunnassa tilaa korttien varjoille, vaakasuunnassa ei yhtään.

           Vaakasuuntainen negatiivinen marginaali työnsi radan ulos ruudulta

           kapeilla näytöillä ja aiheutti sivun vaakavierityksen. */

        .tt-rv-track {

            display: flex;

            gap: 16px;

            overflow-x: auto;

            scroll-snap-type: x mandatory;

            padding: 6px 0;

            margin: -6px 0;

            max-width: 100%;

            scrollbar-width: none;

            -ms-overflow-style: none;

        }

        .tt-rv-track::-webkit-scrollbar { display: none; }

        .tt-rv-card {

            display: flex;

            flex-direction: column;

            text-align: left;

            border-radius: 14px;

            padding: 20px 22px;

            box-shadow: 0 2px 10px rgba(20, 25, 40, 0.07);

            scroll-snap-align: start;

            flex: 0 0 auto;

        }

        .tt-rv-track[data-cols="1"] > .tt-rv-card { flex-basis: 100%; }

        .tt-rv-track[data-cols="2"] > .tt-rv-card { flex-basis: calc((100% - 16px) / 2); }

        .tt-rv-track[data-cols="3"] > .tt-rv-card { flex-basis: calc((100% - 32px) / 3); }

        .tt-rv-track[data-cols="4"] > .tt-rv-card { flex-basis: calc((100% - 48px) / 4); }

        .tt-rv-card-head {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px;

            margin-bottom: 10px;

        }

        .tt-rv-date { font-size: 13px; color: #8a8f99; white-space: nowrap; }

        .tt-rv-card-title {

            font-size: 15px;

            font-weight: 600;

            color: #1f2430;

            margin: 0 0 4px;

        }

        .tt-rv-card-text {

            font-size: 14.5px;

            line-height: 1.55;

            color: #3a3f4a;

            margin: 0;

            display: -webkit-box;

            -webkit-line-clamp: 6;

            -webkit-box-orient: vertical;

            overflow: hidden;

        }

        .tt-rv-card-text.is-open {

            display: block;

            overflow: visible;

        }

        .tt-reviews .tt-rv-more {

            display: inline-block !important;

            align-self: flex-start !important;

            width: auto !important;

            height: auto !important;

            margin: 10px 0 0 !important;

            padding: 0 !important;

            border: 0 !important;

            border-radius: 0 !important;

            background: none !important;

            font-family: inherit !important;

            font-size: 13.5px !important;

            font-weight: 600 !important;

            line-height: 1.4 !important;

            color: #336fec !important;

            text-decoration: underline !important;

            cursor: pointer;

        }

        .tt-rv-card-foot {

            display: flex;

            align-items: center;

            gap: 10px;

            margin-top: auto;

            padding-top: 14px;

            border-top: 1px solid rgba(20, 25, 40, 0.07);

        }

        .tt-rv-card-text + .tt-rv-card-foot { margin-top: auto; }

        .tt-rv-signature {

            margin: 12px 0 0;

            font-size: 13.5px;

            font-weight: 500;

            color: #6b707b;

        }

        .tt-rv-avatar {

            width: 44px;

            height: 44px;

            border-radius: 50%;

            color: #fff;

            font-size: 14px;

            font-weight: 600;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

        }

        .tt-reviews .tt-rv-avatar-img {

            width: 44px;

            height: 44px;

            min-width: 44px;

            border-radius: 50%;

            object-fit: cover;

            flex-shrink: 0;

            display: block;

            background: #eef0f4;

        }

        .tt-rv-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }

        .tt-rv-label {

            font-size: 11px;

            color: #9aa0aa;

            text-transform: uppercase;

            letter-spacing: 0.6px;

        }

        .tt-rv-name {

            font-size: 14px;

            font-weight: 600;

            color: #1f2430;

        }

        .tt-rv-name a { color: #1f2430; text-decoration: none; }

        .tt-rv-name a:hover { text-decoration: underline; }

        .tt-rv-city {

            font-weight: 400;

            color: #8a8f99;

        }



        .tt-rv-nav { position: absolute; inset: 0; pointer-events: none; }

        .tt-reviews .tt-rv-arrow {

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            pointer-events: auto;

            width: 44px !important;

            height: 44px !important;

            padding: 0 !important;

            border: 1px solid rgba(20, 25, 40, 0.12) !important;

            border-radius: 50% !important;

            background: #fff !important;

            color: #1f2430 !important;

            display: inline-flex !important;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            box-shadow: 0 2px 12px rgba(20, 25, 40, 0.12) !important;

            transition: background-color .15s, border-color .15s, opacity .15s;

        }

        .tt-rv-arrow[data-dir="-1"] { left: 0; }

        .tt-rv-arrow[data-dir="1"] { right: 0; }

        .tt-rv-arrow svg { width: 18px; height: 18px; display: block; }

        .tt-reviews .tt-rv-arrow:hover { background: #f5f7fa !important; border-color: rgba(20, 25, 40, 0.25) !important; }



        .tt-reviews-summary {

            display: inline-flex;

            align-items: center;

            gap: 10px;

        }

        .tt-reviews-star {

            width: 26px;

            height: 26px;

            flex-shrink: 0;

            color: #FFAC00;

        }

        .tt-reviews-avg {

            font-size: 24px;

            font-weight: 700;

            color: #1f2430;

            line-height: 1;

        }

        .tt-reviews-count {

            font-size: 15px;

            color: #666;

        }

        @media (max-width: 1024px) {

            .tt-rv-carousel { padding: 0 46px; }

            .tt-rv-track[data-cols] > .tt-rv-card { flex-basis: calc((100% - 16px) / 2); }

        }

        /* Puhelimessa nuolet siirtyvät korttien alle, jottei niitä tarvitse

           tavoitella kortin päältä. Pyyhkäisy toimii silti normaalisti. */

        @media (max-width: 640px) {

            .tt-rv-carousel { padding: 0; }

            .tt-rv-track[data-cols] > .tt-rv-card { flex-basis: 87%; }

            .tt-rv-nav {

                position: static;

                display: flex;

                justify-content: center;

                gap: 16px;

                margin-top: 18px;

                pointer-events: auto;

            }

            .tt-reviews .tt-rv-arrow { position: static; transform: none; }

            .tt-rv-title { font-size: 21px; }

            .tt-rv-sumcard { padding: 14px 20px; gap: 10px; }

            .tt-rv-card { padding: 18px; }

            .tt-reviews-avg { font-size: 21px; }

            .tt-reviews-count { font-size: 14px; }

            .tt-reviews-star { width: 22px; height: 22px; }

        }

        @media (prefers-reduced-motion: reduce) {

            .tt-rv-arrow { transition: none; }

        }